mirror of
https://gitee.com/mateos/mateclaw.git
synced 2026-09-13 03:13:41 +08:00
feat(wiki-ui): library home + workspace split for Wiki page
This commit is contained in:
matevip
parent
f71f49bda1
commit
6e57f78fc2
@ -1767,6 +1767,22 @@ export default {
|
||||
knowledgeBases: 'Knowledge Bases',
|
||||
noKB: 'No knowledge bases yet',
|
||||
selectKB: 'Select a knowledge base',
|
||||
library: {
|
||||
countLabel: '{count} knowledge bases',
|
||||
searchPlaceholder: 'Search knowledge bases...',
|
||||
empty: 'No knowledge bases yet',
|
||||
emptyHint: 'Click "New Knowledge Base" in the top right to start organizing your knowledge.',
|
||||
noMatch: 'No matching knowledge bases',
|
||||
open: 'Open',
|
||||
pages: '{count} pages',
|
||||
raws: '{count} materials',
|
||||
noDescription: 'No description',
|
||||
updatedAt: 'Updated {time}',
|
||||
sortRecent: 'Recently updated',
|
||||
sortName: 'Name',
|
||||
sortPages: 'Pages',
|
||||
backToLibrary: 'Back to library',
|
||||
},
|
||||
selectPage: 'Select a page from the sidebar',
|
||||
pageKicker: 'Knowledge Page',
|
||||
confirmDelete: 'Delete page "{title}"? This cannot be undone.',
|
||||
|
||||
@ -1779,6 +1779,22 @@ export default {
|
||||
knowledgeBases: '知识库',
|
||||
noKB: '暂无知识库',
|
||||
selectKB: '请选择一个知识库',
|
||||
library: {
|
||||
countLabel: '{count} 个知识库',
|
||||
searchPlaceholder: '搜索知识库...',
|
||||
empty: '还没有知识库',
|
||||
emptyHint: '点击右上角"新建知识库"开始组织你的知识',
|
||||
noMatch: '没有匹配的知识库',
|
||||
open: '进入',
|
||||
pages: '{count} 页',
|
||||
raws: '{count} 材料',
|
||||
noDescription: '暂无描述',
|
||||
updatedAt: '更新于 {time}',
|
||||
sortRecent: '最近更新',
|
||||
sortName: '名称',
|
||||
sortPages: '页面数',
|
||||
backToLibrary: '返回库',
|
||||
},
|
||||
selectPage: '从左侧选择一个页面查看',
|
||||
pageKicker: '知识页面',
|
||||
confirmDelete: '确认删除页面「{title}」？此操作不可撤销。',
|
||||
|
||||
@ -109,6 +109,14 @@ export const useWikiStore = defineStore('wiki', () => {
|
||||
}
|
||||
}
|
||||
|
||||
function backToLibrary() {
|
||||
currentKB.value = null
|
||||
currentPage.value = null
|
||||
rawMaterials.value = []
|
||||
pages.value = []
|
||||
selectedRawId.value = null
|
||||
}
|
||||
|
||||
async function fetchRawMaterials(kbId: number) {
|
||||
const res: any = await wikiApi.listRaw(kbId)
|
||||
rawMaterials.value = res.data || []
|
||||
@ -183,6 +191,7 @@ export const useWikiStore = defineStore('wiki', () => {
|
||||
selectKB,
|
||||
createKB,
|
||||
deleteKB,
|
||||
backToLibrary,
|
||||
fetchRawMaterials,
|
||||
fetchPages,
|
||||
filterPagesByRaw,
|
||||
|
||||
177
mateclaw-ui/src/views/Wiki/components/WikiKBCard.vue
Normal file
177
mateclaw-ui/src/views/Wiki/components/WikiKBCard.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="kb-card mc-surface-card"
|
||||
:class="{ 'kb-card--has-warn': failedJobCount > 0 }"
|
||||
@click="$emit('open', kb.id)"
|
||||
>
|
||||
<div class="kb-card-top">
|
||||
<div class="kb-card-icon" :style="iconStyle">{{ initial }}</div>
|
||||
<span
|
||||
class="kb-status-dot"
|
||||
:class="kb.status"
|
||||
:title="t(`wiki.status.${kb.status}`)"
|
||||
></span>
|
||||
</div>
|
||||
<div class="kb-card-body">
|
||||
<h3 class="kb-card-name">{{ kb.name }}</h3>
|
||||
<p class="kb-card-desc" :class="{ 'kb-card-desc--muted': !kb.description }">
|
||||
{{ kb.description || t('wiki.library.noDescription') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="kb-card-footer">
|
||||
<div class="kb-card-stats">
|
||||
<span class="kb-card-stat">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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"/></svg>
|
||||
{{ kb.pageCount }}
|
||||
</span>
|
||||
<span class="kb-card-stat">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
{{ kb.rawCount }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="kb-card-time">{{ relative }}</span>
|
||||
</div>
|
||||
<div v-if="failedJobCount > 0" class="kb-card-warn">
|
||||
⚠ {{ t('wiki.stats.failedJobs', { count: failedJobCount }) }}
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { WikiKB } from '@/stores/useWikiStore'
|
||||
import { kbAccent, kbAccentFg, kbInitial, relativeTime } from '../utils/kbVisual'
|
||||
|
||||
const props = defineProps<{
|
||||
kb: WikiKB
|
||||
failedJobCount?: number
|
||||
}>()
|
||||
|
||||
defineEmits<{ (e: 'open', id: number): void }>()
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const failedJobCount = computed(() => props.failedJobCount ?? 0)
|
||||
const initial = computed(() => kbInitial(props.kb))
|
||||
const iconStyle = computed(() => ({
|
||||
background: kbAccent(props.kb),
|
||||
color: kbAccentFg(props.kb),
|
||||
}))
|
||||
const relative = computed(() => relativeTime(props.kb.updateTime, locale.value.startsWith('zh')))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.kb-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 18px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--mc-border-light);
|
||||
background: var(--mc-bg-elevated);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
.kb-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
|
||||
border-color: var(--mc-border);
|
||||
}
|
||||
.kb-card:focus-visible { outline: 2px solid var(--mc-primary); outline-offset: 2px; }
|
||||
|
||||
.kb-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.kb-card-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kb-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 9999px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.kb-status-dot.active { background: var(--mc-success); }
|
||||
.kb-status-dot.processing { background: var(--mc-primary); animation: pulse 1.4s ease-in-out infinite; }
|
||||
.kb-status-dot.error { background: var(--mc-danger); }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.kb-card-body { display: flex; flex-direction: column; gap: 4px; min-height: 56px; }
|
||||
.kb-card-name {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--mc-text-primary);
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.kb-card-desc {
|
||||
font-size: 12.5px;
|
||||
color: var(--mc-text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.kb-card-desc--muted { color: var(--mc-text-tertiary); font-style: italic; }
|
||||
|
||||
.kb-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--mc-border-light);
|
||||
}
|
||||
.kb-card-stats { display: flex; align-items: center; gap: 10px; }
|
||||
.kb-card-stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--mc-text-secondary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.kb-card-time {
|
||||
font-size: 11px;
|
||||
color: var(--mc-text-tertiary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.kb-card-warn {
|
||||
font-size: 11px;
|
||||
color: var(--mc-danger);
|
||||
background: rgba(245, 108, 108, 0.08);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.kb-card--has-warn { border-color: rgba(245, 108, 108, 0.3); }
|
||||
</style>
|
||||
254
mateclaw-ui/src/views/Wiki/components/WikiLibrary.vue
Normal file
254
mateclaw-ui/src/views/Wiki/components/WikiLibrary.vue
Normal file
@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="wiki-library">
|
||||
<div class="mc-page-header">
|
||||
<div>
|
||||
<div class="mc-page-kicker">{{ t('wiki.kicker') }}</div>
|
||||
<h1 class="mc-page-title">{{ t('nav.wiki') }}</h1>
|
||||
<p class="mc-page-desc">{{ t('wiki.desc') }}</p>
|
||||
</div>
|
||||
<button class="btn-primary page-cta" @click="$emit('create')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
{{ t('wiki.createKB') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="library-toolbar mc-surface-card">
|
||||
<div class="library-count">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||
{{ t('wiki.library.countLabel', { count: filtered.length }) }}
|
||||
</div>
|
||||
<div class="library-search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input
|
||||
v-model="searchInput"
|
||||
type="text"
|
||||
:placeholder="t('wiki.library.searchPlaceholder')"
|
||||
class="library-search-input"
|
||||
/>
|
||||
<button v-if="searchInput" class="library-search-clear" @click="searchInput = ''">✕</button>
|
||||
</div>
|
||||
<div class="library-sort">
|
||||
<select v-model="sortInput" class="library-sort-select">
|
||||
<option value="recent">{{ t('wiki.library.sortRecent') }}</option>
|
||||
<option value="name">{{ t('wiki.library.sortName') }}</option>
|
||||
<option value="pages">{{ t('wiki.library.sortPages') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="library-message">{{ t('common.loading') }}</div>
|
||||
|
||||
<div v-else-if="kbs.length === 0" class="library-empty mc-surface-card">
|
||||
<div class="library-empty-icon">
|
||||
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2">
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="library-empty-title">{{ t('wiki.library.empty') }}</h3>
|
||||
<p class="library-empty-hint">{{ t('wiki.library.emptyHint') }}</p>
|
||||
<button class="btn-primary" @click="$emit('create')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
{{ t('wiki.createKB') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filtered.length === 0" class="library-message">
|
||||
{{ t('wiki.library.noMatch') }}
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="kb-grid">
|
||||
<WikiKBCard
|
||||
v-for="kb in pageItems"
|
||||
:key="kb.id"
|
||||
:kb="kb"
|
||||
:failed-job-count="kbStats[kb.id]?.failedJobCount || 0"
|
||||
@open="$emit('open', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="library-pager">
|
||||
<McPagination
|
||||
v-model:page="page"
|
||||
v-model:size="size"
|
||||
:total="filtered.length"
|
||||
:sizes="[12, 24, 48]"
|
||||
hide-on-single-page
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { WikiKB } from '@/stores/useWikiStore'
|
||||
import McPagination from '@/components/common/McPagination.vue'
|
||||
import WikiKBCard from './WikiKBCard.vue'
|
||||
|
||||
interface KBStats {
|
||||
failedJobCount: number
|
||||
[k: string]: any
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
kbs: WikiKB[]
|
||||
kbStats: Record<number, KBStats>
|
||||
loading: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e: 'open', id: number): void
|
||||
(e: 'create'): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const searchInput = ref('')
|
||||
type SortMode = 'recent' | 'name' | 'pages'
|
||||
const sortInput = ref<SortMode>('recent')
|
||||
|
||||
const page = ref(1)
|
||||
const size = ref(12)
|
||||
|
||||
const filtered = computed<WikiKB[]>(() => {
|
||||
const q = searchInput.value.trim().toLowerCase()
|
||||
let list = props.kbs.slice()
|
||||
if (q) {
|
||||
list = list.filter(kb =>
|
||||
kb.name.toLowerCase().includes(q) ||
|
||||
(kb.description || '').toLowerCase().includes(q)
|
||||
)
|
||||
}
|
||||
if (sortInput.value === 'name') {
|
||||
list.sort((a, b) => a.name.localeCompare(b.name))
|
||||
} else if (sortInput.value === 'pages') {
|
||||
list.sort((a, b) => (b.pageCount || 0) - (a.pageCount || 0))
|
||||
} else {
|
||||
list.sort((a, b) => {
|
||||
const ta = a.updateTime ? new Date(a.updateTime).getTime() : 0
|
||||
const tb = b.updateTime ? new Date(b.updateTime).getTime() : 0
|
||||
return tb - ta
|
||||
})
|
||||
}
|
||||
return list
|
||||
})
|
||||
|
||||
// Reset to page 1 whenever the filtered/sorted set changes shape — otherwise
|
||||
// you can land on an out-of-range page after a search.
|
||||
watch([searchInput, sortInput], () => { page.value = 1 })
|
||||
watch(() => props.kbs.length, () => { page.value = 1 })
|
||||
|
||||
const pageItems = computed(() => {
|
||||
const start = (page.value - 1) * size.value
|
||||
return filtered.value.slice(start, start + size.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wiki-library { display: flex; flex-direction: column; }
|
||||
|
||||
.btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); transition: opacity 0.15s; }
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
|
||||
.library-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.library-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--mc-text-secondary);
|
||||
padding-right: 14px;
|
||||
border-right: 1px solid var(--mc-border-light);
|
||||
}
|
||||
.library-search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 12px;
|
||||
background: var(--mc-bg-muted);
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 10px;
|
||||
color: var(--mc-text-tertiary);
|
||||
transition: border-color 0.15s;
|
||||
max-width: 360px;
|
||||
}
|
||||
.library-search:focus-within { border-color: var(--mc-primary); }
|
||||
.library-search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
color: var(--mc-text-primary);
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.library-search-input::placeholder { color: var(--mc-text-tertiary); }
|
||||
.library-search-clear { border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); font-size: 12px; padding: 0; line-height: 1; }
|
||||
.library-search-clear:hover { color: var(--mc-text-secondary); }
|
||||
|
||||
.library-sort { margin-left: auto; }
|
||||
.library-sort-select {
|
||||
padding: 7px 12px;
|
||||
background: var(--mc-bg-muted);
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 10px;
|
||||
color: var(--mc-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.library-sort-select:focus { border-color: var(--mc-primary); }
|
||||
|
||||
.library-message {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: var(--mc-text-tertiary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.library-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
gap: 14px;
|
||||
}
|
||||
.library-empty-icon { color: var(--mc-text-tertiary); opacity: 0.6; }
|
||||
.library-empty-title { font-size: 18px; font-weight: 700; color: var(--mc-text-primary); margin: 0; }
|
||||
.library-empty-hint { font-size: 13px; color: var(--mc-text-tertiary); margin: 0 0 8px; max-width: 380px; line-height: 1.5; }
|
||||
|
||||
.kb-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.library-pager {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.library-toolbar { flex-wrap: wrap; }
|
||||
.library-search { max-width: 100%; }
|
||||
.library-sort { margin-left: 0; }
|
||||
}
|
||||
</style>
|
||||
599
mateclaw-ui/src/views/Wiki/components/WikiPageSidebar.vue
Normal file
599
mateclaw-ui/src/views/Wiki/components/WikiPageSidebar.vue
Normal file
@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<div class="wiki-sidebar mc-surface-card">
|
||||
<div class="sidebar-section sidebar-section--pages">
|
||||
<div class="sidebar-title-row">
|
||||
<h3 class="sidebar-label">
|
||||
{{ t('wiki.pages') }}
|
||||
<span class="count-badge">{{ store.pages.length }}</span>
|
||||
</h3>
|
||||
<div class="sidebar-title-actions">
|
||||
<button
|
||||
v-if="!batchMode"
|
||||
class="icon-btn" :title="t('wiki.batchSelect')"
|
||||
@click="batchMode = true"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||||
</button>
|
||||
<button v-else class="icon-btn icon-btn--active" @click="exitBatchMode">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input
|
||||
v-model="pageSearch"
|
||||
type="text"
|
||||
:placeholder="t('wiki.searchPages')"
|
||||
class="search-input"
|
||||
/>
|
||||
<button v-if="pageSearch" class="search-clear" @click="pageSearch = ''">✕</button>
|
||||
</div>
|
||||
|
||||
<div v-if="batchMode" class="batch-bar">
|
||||
<label class="batch-check-all">
|
||||
<input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
|
||||
<span>{{ t('wiki.selectAll') }}</span>
|
||||
</label>
|
||||
<button
|
||||
class="batch-delete-btn"
|
||||
:disabled="selectedSlugs.length === 0"
|
||||
@click="handleBatchDelete"
|
||||
>
|
||||
{{ t('common.delete') }} ({{ selectedSlugs.length }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="store.selectedRawId" class="filter-banner">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 3H2l8 9.46V19l4 2V12.46L22 3z"/></svg>
|
||||
{{ t('wiki.filteredByRaw') }}
|
||||
<button class="filter-clear-btn" @click="store.clearRawFilter(store.currentKB!.id)">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="page-list" v-if="!pageSearch" ref="pageListEl" @scroll="onPageListScroll">
|
||||
<div v-for="group in groupedPages" :key="group.type" class="page-group">
|
||||
<button
|
||||
class="group-header"
|
||||
@click="toggleGroup(group.type)"
|
||||
>
|
||||
<svg
|
||||
class="group-chevron"
|
||||
:class="{ expanded: !collapsedGroups.has(group.type) }"
|
||||
width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||
><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span class="group-label">{{ formatGroupLabel(group.type) }}</span>
|
||||
<span class="group-count">{{ group.pages.length }}</span>
|
||||
</button>
|
||||
<div v-if="!collapsedGroups.has(group.type)" class="group-items">
|
||||
<div
|
||||
v-for="page in paginatedGroupPages(group)" :key="page.slug"
|
||||
class="page-item"
|
||||
:class="{
|
||||
active: !batchMode && store.currentPage?.slug === page.slug,
|
||||
'page-item--system': page.pageType === 'system'
|
||||
}"
|
||||
@click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
|
||||
>
|
||||
<input
|
||||
v-if="batchMode"
|
||||
type="checkbox"
|
||||
:checked="selectedSlugs.includes(page.slug)"
|
||||
:disabled="isProtectedPage(page)"
|
||||
class="page-checkbox"
|
||||
@click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
|
||||
/>
|
||||
<div class="page-item-body">
|
||||
<div class="page-item-title">{{ page.title }}</div>
|
||||
<div class="page-item-meta">
|
||||
<span v-if="page.lastUpdatedBy === 'manual'" class="edit-dot manual" title="Manual edit"></span>
|
||||
<span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
|
||||
<span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
|
||||
<span class="meta-text">v{{ page.version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
v-if="(groupPageLimit[group.type] || PAGE_STEP) < group.pages.length"
|
||||
class="load-more-btn"
|
||||
@click.stop="loadMoreGroup(group.type)"
|
||||
>
|
||||
{{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, group.pages.length - (groupPageLimit[group.type] || PAGE_STEP)) }) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="groupedPages.length === 0" class="empty-hint">{{ t('wiki.noPages') }}</div>
|
||||
|
||||
<div class="archived-section">
|
||||
<button
|
||||
class="archived-toggle"
|
||||
:disabled="archivedLoading"
|
||||
@click="toggleArchived"
|
||||
>
|
||||
<svg
|
||||
class="archived-chevron"
|
||||
:class="{ expanded: archivedOpen }"
|
||||
width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||
><polyline points="9 18 15 12 9 6"/></svg>
|
||||
{{ t('wiki.archivedSection') }}
|
||||
<span v-if="archivedPages.length > 0" class="archived-count">{{ archivedPages.length }}</span>
|
||||
</button>
|
||||
<div v-if="archivedOpen" class="archived-items">
|
||||
<div v-if="archivedLoading" class="archived-empty">{{ t('common.loading') }}</div>
|
||||
<div v-else-if="archivedPages.length === 0" class="archived-empty">{{ t('wiki.noArchived') }}</div>
|
||||
<div v-else
|
||||
v-for="page in archivedPages" :key="'arc:' + page.slug"
|
||||
class="archived-item"
|
||||
@click="openPage(page.slug)"
|
||||
>
|
||||
<div class="archived-item-body">
|
||||
<div class="archived-item-title">{{ page.title }}</div>
|
||||
<div class="archived-item-meta">v{{ page.version }} · {{ page.slug }}</div>
|
||||
</div>
|
||||
<button
|
||||
class="archived-restore-btn"
|
||||
:title="t('wiki.unarchive')"
|
||||
@click.stop="restoreArchivedPage(page.slug)"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="3 7 12 12 21 7"/><path d="M3 7v10l9 5 9-5V7"/>
|
||||
</svg>
|
||||
{{ t('wiki.unarchive') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-list" v-else>
|
||||
<div
|
||||
v-for="page in paginatedSearch" :key="page.slug"
|
||||
class="page-item"
|
||||
:class="{
|
||||
active: !batchMode && store.currentPage?.slug === page.slug,
|
||||
'page-item--system': page.pageType === 'system'
|
||||
}"
|
||||
@click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
|
||||
>
|
||||
<input
|
||||
v-if="batchMode"
|
||||
type="checkbox"
|
||||
:checked="selectedSlugs.includes(page.slug)"
|
||||
:disabled="isProtectedPage(page)"
|
||||
class="page-checkbox"
|
||||
@click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
|
||||
/>
|
||||
<div class="page-item-body">
|
||||
<div class="page-item-title">{{ page.title }}</div>
|
||||
<div class="page-item-meta">
|
||||
<span class="type-chip">{{ formatGroupLabel(page.pageType || 'other') }}</span>
|
||||
<span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
|
||||
<span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
|
||||
<span class="meta-text">v{{ page.version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="filteredPages.length > searchPageLimit" class="pagination-row">
|
||||
<button class="load-more-btn" @click="searchPageLimit += PAGE_STEP">
|
||||
{{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, filteredPages.length - searchPageLimit) }) }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="filteredPages.length === 0" class="empty-hint">{{ t('wiki.noResults') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useWikiStore, isProtectedPage, type WikiPage } from '@/stores/useWikiStore'
|
||||
import { wikiApi } from '@/api/index'
|
||||
|
||||
const emit = defineEmits<{ (e: 'open-page', slug: string): void }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useWikiStore()
|
||||
const pageListEl = ref<HTMLElement | null>(null)
|
||||
|
||||
const PAGE_STEP = 20
|
||||
const TYPE_ORDER = ['concept', 'technology', 'process', 'person', 'organization', 'product', 'place', 'event', 'term', 'other']
|
||||
|
||||
const pageSearch = ref('')
|
||||
const searchPageLimit = ref(PAGE_STEP)
|
||||
const groupPageLimit = reactive<Record<string, number>>({})
|
||||
const collapsedGroups = reactive<Set<string>>(new Set())
|
||||
|
||||
const batchMode = ref(false)
|
||||
const selectedSlugs = ref<string[]>([])
|
||||
|
||||
const archivedOpen = ref(false)
|
||||
const archivedLoading = ref(false)
|
||||
const archivedPages = ref<WikiPage[]>([])
|
||||
|
||||
const filteredPages = computed(() => {
|
||||
const q = pageSearch.value.toLowerCase()
|
||||
if (!q) return store.pages
|
||||
return store.pages.filter(
|
||||
(p) => p.title.toLowerCase().includes(q) || p.slug.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
const paginatedSearch = computed(() => filteredPages.value.slice(0, searchPageLimit.value))
|
||||
|
||||
const groupedPages = computed(() => {
|
||||
const map = new Map<string, typeof store.pages>()
|
||||
for (const page of store.pages) {
|
||||
const type = (page.pageType || 'other').toLowerCase()
|
||||
if (!map.has(type)) map.set(type, [])
|
||||
map.get(type)!.push(page)
|
||||
}
|
||||
return [...map.entries()]
|
||||
.sort(([a], [b]) => {
|
||||
const ia = TYPE_ORDER.indexOf(a) >= 0 ? TYPE_ORDER.indexOf(a) : 99
|
||||
const ib = TYPE_ORDER.indexOf(b) >= 0 ? TYPE_ORDER.indexOf(b) : 99
|
||||
return ia - ib
|
||||
})
|
||||
.map(([type, pages]) => ({ type, pages }))
|
||||
})
|
||||
|
||||
const allSelected = computed(() =>
|
||||
filteredPages.value.length > 0 && selectedSlugs.value.length === filteredPages.value.length
|
||||
)
|
||||
|
||||
watch(() => store.currentKB?.id, () => {
|
||||
searchPageLimit.value = PAGE_STEP
|
||||
Object.keys(groupPageLimit).forEach(k => delete groupPageLimit[k])
|
||||
collapsedGroups.clear()
|
||||
archivedOpen.value = false
|
||||
archivedPages.value = []
|
||||
pageSearch.value = ''
|
||||
exitBatchMode()
|
||||
})
|
||||
|
||||
watch(() => pageSearch.value, () => { searchPageLimit.value = PAGE_STEP })
|
||||
|
||||
function toggleGroup(type: string) {
|
||||
if (collapsedGroups.has(type)) collapsedGroups.delete(type)
|
||||
else collapsedGroups.add(type)
|
||||
}
|
||||
|
||||
function loadMoreGroup(type: string) {
|
||||
groupPageLimit[type] = (groupPageLimit[type] || PAGE_STEP) + PAGE_STEP
|
||||
}
|
||||
|
||||
function paginatedGroupPages(group: { type: string; pages: any[] }) {
|
||||
const limit = groupPageLimit[group.type] || PAGE_STEP
|
||||
return group.pages.slice(0, limit)
|
||||
}
|
||||
|
||||
function formatGroupLabel(type: string): string {
|
||||
if (!type) return t('wiki.pageTypes.other')
|
||||
const key = `wiki.pageTypes.${type.toLowerCase()}`
|
||||
const translated = t(key)
|
||||
return translated === key ? (type.charAt(0).toUpperCase() + type.slice(1)) : translated
|
||||
}
|
||||
|
||||
function toggleSelect(slug: string) {
|
||||
const idx = selectedSlugs.value.indexOf(slug)
|
||||
if (idx >= 0) selectedSlugs.value.splice(idx, 1)
|
||||
else selectedSlugs.value.push(slug)
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
if (allSelected.value) selectedSlugs.value = []
|
||||
else selectedSlugs.value = filteredPages.value.map(p => p.slug)
|
||||
}
|
||||
|
||||
function exitBatchMode() {
|
||||
batchMode.value = false
|
||||
selectedSlugs.value = []
|
||||
}
|
||||
|
||||
async function handleBatchDelete() {
|
||||
if (selectedSlugs.value.length === 0 || !store.currentKB) return
|
||||
const confirmed = confirm(t('wiki.confirmBatchDelete', { count: selectedSlugs.value.length }))
|
||||
if (!confirmed) return
|
||||
try {
|
||||
await wikiApi.batchDeletePages(store.currentKB.id, selectedSlugs.value)
|
||||
exitBatchMode()
|
||||
await store.fetchPages(store.currentKB.id)
|
||||
} catch (e: any) {
|
||||
alert(e?.message || 'Batch delete failed')
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleArchived() {
|
||||
archivedOpen.value = !archivedOpen.value
|
||||
if (archivedOpen.value && archivedPages.value.length === 0 && store.currentKB) {
|
||||
archivedLoading.value = true
|
||||
try {
|
||||
const res: any = await wikiApi.listArchivedPages(store.currentKB.id)
|
||||
archivedPages.value = (res?.data || res || []) as WikiPage[]
|
||||
} catch (e) {
|
||||
console.error('[Wiki] Failed to load archived pages', e)
|
||||
archivedPages.value = []
|
||||
} finally {
|
||||
archivedLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function restoreArchivedPage(slug: string) {
|
||||
if (!store.currentKB) return
|
||||
try {
|
||||
await wikiApi.unarchivePage(store.currentKB.id, slug)
|
||||
archivedPages.value = archivedPages.value.filter(p => p.slug !== slug)
|
||||
await store.fetchPages(store.currentKB.id)
|
||||
} catch (e: any) {
|
||||
console.error('[Wiki] Unarchive failed', e)
|
||||
alert(e?.message || 'Unarchive failed')
|
||||
}
|
||||
}
|
||||
|
||||
function openPage(slug: string) {
|
||||
emit('open-page', slug)
|
||||
}
|
||||
|
||||
function onPageListScroll() {
|
||||
const el = pageListEl.value
|
||||
if (!el) return
|
||||
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 60) {
|
||||
for (const group of groupedPages.value) {
|
||||
const limit = groupPageLimit[group.type] || PAGE_STEP
|
||||
if (limit < group.pages.length) {
|
||||
loadMoreGroup(group.type)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wiki-sidebar {
|
||||
width: 272px;
|
||||
min-width: 272px;
|
||||
overflow-y: auto;
|
||||
padding: 14px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.sidebar-section--pages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
|
||||
|
||||
.sidebar-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--mc-text-tertiary);
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 16px;
|
||||
padding: 0 5px;
|
||||
background: var(--mc-bg-sunken);
|
||||
color: var(--mc-text-secondary);
|
||||
border-radius: 9999px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 10px;
|
||||
background: var(--mc-bg-muted);
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 10px;
|
||||
color: var(--mc-text-tertiary);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.search-wrap:focus-within { border-color: var(--mc-primary); }
|
||||
.search-input { flex: 1; border: none; background: transparent; font-size: 12px; color: var(--mc-text-primary); outline: none; }
|
||||
.search-input::placeholder { color: var(--mc-text-tertiary); }
|
||||
.search-clear { border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); font-size: 11px; padding: 0; line-height: 1; }
|
||||
.search-clear:hover { color: var(--mc-text-secondary); }
|
||||
|
||||
.sidebar-title-row { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
|
||||
.sidebar-title-actions { display: flex; gap: 4px; }
|
||||
.icon-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--mc-border-light);
|
||||
background: var(--mc-bg-elevated);
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
color: var(--mc-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.icon-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); }
|
||||
.icon-btn--active { color: var(--mc-primary); border-color: var(--mc-primary); }
|
||||
|
||||
.page-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
|
||||
|
||||
.page-group { display: flex; flex-direction: column; }
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 6px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background 0.12s;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.group-header:hover { background: var(--mc-bg-muted); }
|
||||
.group-chevron { color: var(--mc-text-tertiary); transition: transform 0.18s; flex-shrink: 0; }
|
||||
.group-chevron.expanded { transform: rotate(90deg); }
|
||||
.group-label { font-size: 11px; font-weight: 600; color: var(--mc-text-secondary); flex: 1; }
|
||||
.group-count {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
background: var(--mc-bg-sunken);
|
||||
color: var(--mc-text-tertiary);
|
||||
border-radius: 9999px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.group-items { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; }
|
||||
|
||||
.page-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.page-item:hover { background: var(--mc-bg-muted); }
|
||||
.page-item.active { background: var(--mc-primary-bg); border-color: rgba(217, 109, 70, 0.12); }
|
||||
.page-item-body { flex: 1; min-width: 0; }
|
||||
.page-item-title { font-size: 12px; color: var(--mc-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.page-item-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
|
||||
.meta-text { font-size: 10px; color: var(--mc-text-tertiary); }
|
||||
.type-chip { font-size: 10px; padding: 1px 5px; background: var(--mc-bg-sunken); border-radius: 4px; color: var(--mc-text-tertiary); }
|
||||
.edit-dot { width: 5px; height: 5px; border-radius: 9999px; flex-shrink: 0; }
|
||||
.edit-dot.manual { background: var(--mc-primary); }
|
||||
.page-checkbox { flex-shrink: 0; cursor: pointer; }
|
||||
.page-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
|
||||
|
||||
.page-flag { font-size: 10px; padding: 1px 6px; border-radius: 99px; font-weight: 600; }
|
||||
.page-flag--system { background: var(--mc-primary-bg); color: var(--mc-primary); border: 1px solid var(--mc-primary); }
|
||||
.page-flag--locked { background: var(--mc-bg-elevated); color: var(--mc-text-secondary); border: 1px solid var(--mc-border-light); }
|
||||
|
||||
.page-item--system { border-left: 2px solid var(--mc-primary); padding-left: 6px; }
|
||||
|
||||
.archived-section { margin-top: 12px; border-top: 1px dashed var(--mc-border-light); padding-top: 8px; }
|
||||
.archived-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding: 6px 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 11px;
|
||||
color: var(--mc-text-tertiary);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.archived-toggle:hover { color: var(--mc-text-secondary); }
|
||||
.archived-toggle:disabled { cursor: wait; opacity: 0.5; }
|
||||
.archived-chevron { transition: transform 0.15s; flex-shrink: 0; }
|
||||
.archived-chevron.expanded { transform: rotate(90deg); }
|
||||
.archived-count {
|
||||
margin-left: auto;
|
||||
padding: 0 6px;
|
||||
background: var(--mc-bg-sunken);
|
||||
border-radius: 99px;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.archived-items { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
|
||||
.archived-empty { padding: 6px 4px; font-size: 11px; font-style: italic; color: var(--mc-text-tertiary); }
|
||||
.archived-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.1s, background 0.1s;
|
||||
}
|
||||
.archived-item:hover { opacity: 1; background: var(--mc-bg-muted); }
|
||||
.archived-item-body { flex: 1; min-width: 0; }
|
||||
.archived-item-title { font-size: 12px; font-weight: 500; color: var(--mc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.archived-item-meta { font-size: 10px; color: var(--mc-text-tertiary); margin-top: 1px; }
|
||||
|
||||
.archived-restore-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
color: var(--mc-text-secondary);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.archived-restore-btn:hover { color: var(--mc-primary); border-color: var(--mc-primary); background: var(--mc-primary-bg); }
|
||||
|
||||
.load-more-btn {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
border: 1px dashed var(--mc-border-light);
|
||||
background: none;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--mc-text-tertiary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.load-more-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); background: var(--mc-primary-bg); }
|
||||
|
||||
.pagination-row { padding: 4px 0; }
|
||||
|
||||
.batch-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--mc-bg-muted); border-radius: 8px; }
|
||||
.batch-check-all { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mc-text-secondary); cursor: pointer; }
|
||||
.batch-check-all input { cursor: pointer; }
|
||||
.batch-delete-btn { padding: 3px 10px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(245, 108, 108, 0.1); color: var(--el-color-danger, #f56c6c); }
|
||||
.batch-delete-btn:hover:not(:disabled) { background: rgba(245, 108, 108, 0.2); }
|
||||
.batch-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.empty-hint { font-size: 13px; color: var(--mc-text-tertiary); padding: 12px 4px; }
|
||||
|
||||
.filter-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
background: var(--mc-primary-bg);
|
||||
border: 1px solid rgba(217,109,70,0.2);
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--mc-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.filter-clear-btn {
|
||||
margin-left: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: var(--mc-primary);
|
||||
font-size: 11px;
|
||||
padding: 0 2px;
|
||||
opacity: 0.7;
|
||||
line-height: 1;
|
||||
}
|
||||
.filter-clear-btn:hover { opacity: 1; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.wiki-sidebar { width: 100%; min-width: 0; max-height: 320px; }
|
||||
}
|
||||
</style>
|
||||
118
mateclaw-ui/src/views/Wiki/components/WikiWorkspace.vue
Normal file
118
mateclaw-ui/src/views/Wiki/components/WikiWorkspace.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="wiki-workspace">
|
||||
<WikiWorkspaceHeader :kb="kb" @back="store.backToLibrary()" />
|
||||
|
||||
<div class="wiki-layout">
|
||||
<WikiPageSidebar @open-page="onOpenPage" />
|
||||
|
||||
<div class="wiki-content mc-surface-card">
|
||||
<div class="wiki-content-body">
|
||||
<div class="content-tabs">
|
||||
<button
|
||||
v-for="tab in tabs" :key="tab.key"
|
||||
class="tab-btn" :class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'raw'" class="tab-content">
|
||||
<RawMaterialPanel />
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'pages'" class="tab-content">
|
||||
<WikiPageViewer v-if="store.currentPage" />
|
||||
<div v-else class="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<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"/>
|
||||
</svg>
|
||||
<p>{{ t('wiki.selectPage') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'graph'" class="tab-content tab-content--graph">
|
||||
<WikiGraphView :pages="store.pages" @open-page="onOpenPage" />
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'config'" class="tab-content tab-content--config">
|
||||
<WikiConfig />
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'hotCache'" class="tab-content tab-content--hot-cache">
|
||||
<HotCachePanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useWikiStore, type WikiKB } from '@/stores/useWikiStore'
|
||||
import RawMaterialPanel from './RawMaterialPanel.vue'
|
||||
import WikiPageViewer from './WikiPageViewer.vue'
|
||||
import WikiConfig from './WikiConfig.vue'
|
||||
import WikiGraphView from './WikiGraphView.vue'
|
||||
import HotCachePanel from './HotCachePanel.vue'
|
||||
import WikiWorkspaceHeader from './WikiWorkspaceHeader.vue'
|
||||
import WikiPageSidebar from './WikiPageSidebar.vue'
|
||||
|
||||
defineProps<{ kb: WikiKB }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useWikiStore()
|
||||
|
||||
const activeTab = ref('raw')
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ key: 'raw', label: t('wiki.rawMaterials') },
|
||||
{ key: 'pages', label: t('wiki.pages') },
|
||||
{ key: 'graph', label: t('wiki.graph.tab') },
|
||||
{ key: 'config', label: t('wiki.config') },
|
||||
{ key: 'hotCache', label: t('wiki.hotCache.tab') },
|
||||
])
|
||||
|
||||
// When the user picks a different KB from the library, snap back to the
|
||||
// raw-materials tab so they don't land on stale state from the previous KB.
|
||||
watch(() => store.currentKB?.id, () => { activeTab.value = 'raw' })
|
||||
|
||||
async function onOpenPage(slug: string) {
|
||||
if (!store.currentKB) return
|
||||
await store.loadPage(store.currentKB.id, slug)
|
||||
activeTab.value = 'pages'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wiki-workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wiki-layout { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
|
||||
|
||||
.wiki-content { flex: 1; overflow: hidden; min-width: 0; padding: 16px; display: flex; flex-direction: column; min-height: 0; }
|
||||
.wiki-content-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
.content-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mc-bg-muted); border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--mc-border-light); align-self: flex-start; }
|
||||
.tab-btn { padding: 7px 14px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--mc-text-secondary); border-radius: 10px; transition: all 0.15s; font-weight: 500; }
|
||||
.tab-btn:hover { color: var(--mc-text-primary); }
|
||||
.tab-btn.active { color: var(--mc-primary); background: var(--mc-bg-elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 600; }
|
||||
.tab-content { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
|
||||
.tab-content--config { overflow: hidden; padding-right: 0; }
|
||||
.tab-content--graph { overflow: hidden; padding: 0; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; color: var(--mc-text-tertiary); text-align: center; }
|
||||
.empty-state p { font-size: 14px; }
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.wiki-layout { flex-direction: column; overflow: visible; }
|
||||
.wiki-content { overflow: visible; }
|
||||
.tab-content { overflow: visible; }
|
||||
.tab-content--config { overflow: visible; }
|
||||
}
|
||||
</style>
|
||||
148
mateclaw-ui/src/views/Wiki/components/WikiWorkspaceHeader.vue
Normal file
148
mateclaw-ui/src/views/Wiki/components/WikiWorkspaceHeader.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="workspace-header">
|
||||
<button class="back-btn" @click="$emit('back')">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
|
||||
<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
|
||||
</svg>
|
||||
{{ t('wiki.library.backToLibrary') }}
|
||||
</button>
|
||||
<div class="workspace-title-block">
|
||||
<div class="workspace-title-row">
|
||||
<div class="workspace-icon" :style="iconStyle">{{ initial }}</div>
|
||||
<div class="workspace-title-text">
|
||||
<h1 class="workspace-title">{{ kb.name }}</h1>
|
||||
<p v-if="kb.description" class="workspace-desc">{{ kb.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workspace-meta">
|
||||
<span class="workspace-stat">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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"/></svg>
|
||||
{{ kb.pageCount }}
|
||||
</span>
|
||||
<span class="workspace-stat">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
{{ kb.rawCount }}
|
||||
</span>
|
||||
<span class="kb-status-dot" :class="kb.status" :title="t(`wiki.status.${kb.status}`)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { WikiKB } from '@/stores/useWikiStore'
|
||||
import { kbAccent, kbAccentFg, kbInitial } from '../utils/kbVisual'
|
||||
|
||||
const props = defineProps<{ kb: WikiKB }>()
|
||||
defineEmits<{ (e: 'back'): void }>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const initial = computed(() => kbInitial(props.kb))
|
||||
const iconStyle = computed(() => ({
|
||||
background: kbAccent(props.kb),
|
||||
color: kbAccentFg(props.kb),
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.workspace-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 4px 4px 18px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: var(--mc-bg-elevated);
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 10px;
|
||||
color: var(--mc-text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.back-btn:hover {
|
||||
color: var(--mc-primary);
|
||||
border-color: var(--mc-primary);
|
||||
background: var(--mc-primary-bg);
|
||||
}
|
||||
|
||||
.workspace-title-block { flex: 1; min-width: 0; }
|
||||
.workspace-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
||||
.workspace-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.workspace-title-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.workspace-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--mc-text-primary);
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.workspace-desc {
|
||||
font-size: 12.5px;
|
||||
color: var(--mc-text-tertiary);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.workspace-meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 14px;
|
||||
background: var(--mc-bg-elevated);
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.workspace-stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--mc-text-secondary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.kb-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 9999px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.kb-status-dot.active { background: var(--mc-success); }
|
||||
.kb-status-dot.processing { background: var(--mc-primary); animation: pulse 1.4s ease-in-out infinite; }
|
||||
.kb-status-dot.error { background: var(--mc-danger); }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.workspace-meta { width: 100%; justify-content: flex-start; }
|
||||
}
|
||||
</style>
|
||||
@ -2,297 +2,21 @@
|
||||
<div class="mc-page-shell wiki-shell">
|
||||
<div class="mc-page-frame wiki-frame">
|
||||
<div class="mc-page-inner wiki-inner">
|
||||
<div class="mc-page-header">
|
||||
<div>
|
||||
<div class="mc-page-kicker">{{ t('wiki.kicker') }}</div>
|
||||
<h1 class="mc-page-title">{{ t('nav.wiki') }}</h1>
|
||||
<p class="mc-page-desc">{{ t('wiki.desc') }}</p>
|
||||
</div>
|
||||
<button class="btn-primary page-cta" @click="showCreateKB = true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
{{ t('wiki.createKB') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="wiki-layout">
|
||||
<!-- Left sidebar: KB list + page list -->
|
||||
<div class="wiki-sidebar mc-surface-card">
|
||||
|
||||
<!-- Knowledge bases -->
|
||||
<div class="sidebar-section">
|
||||
<h3 class="sidebar-label">{{ t('wiki.knowledgeBases') }}</h3>
|
||||
<div v-if="store.loading" class="empty-hint">{{ t('common.loading') }}</div>
|
||||
<div v-else-if="store.knowledgeBases.length === 0" class="empty-hint">{{ t('wiki.noKB') }}</div>
|
||||
<div v-else class="kb-list">
|
||||
<div
|
||||
v-for="kb in store.knowledgeBases" :key="kb.id"
|
||||
class="kb-item" :class="{ active: store.currentKB?.id === kb.id }"
|
||||
@click="selectKB(kb.id)"
|
||||
>
|
||||
<div class="kb-item-name">{{ kb.name }}</div>
|
||||
<div class="kb-item-stats">
|
||||
<span class="stat-chip">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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"/></svg>
|
||||
{{ kb.pageCount }}
|
||||
</span>
|
||||
<span class="stat-chip">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
{{ kb.rawCount }}
|
||||
</span>
|
||||
<span class="kb-status-dot" :class="kb.status" :title="t(`wiki.status.${kb.status}`)"></span>
|
||||
</div>
|
||||
<div v-if="kbStats[kb.id]?.failedJobCount > 0" class="kb-warn">
|
||||
⚠ {{ t('wiki.stats.failedJobs', { count: kbStats[kb.id].failedJobCount }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page list -->
|
||||
<div v-if="store.currentKB" class="sidebar-section sidebar-section--pages">
|
||||
<div class="sidebar-title-row">
|
||||
<h3 class="sidebar-label">
|
||||
{{ t('wiki.pages') }}
|
||||
<span class="count-badge">{{ store.pages.length }}</span>
|
||||
</h3>
|
||||
<div class="sidebar-title-actions">
|
||||
<button
|
||||
v-if="!batchMode"
|
||||
class="icon-btn" :title="t('wiki.batchSelect')"
|
||||
@click="batchMode = true"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||||
</button>
|
||||
<button v-else class="icon-btn icon-btn--active" @click="exitBatchMode">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input
|
||||
v-model="pageSearch"
|
||||
type="text"
|
||||
:placeholder="t('wiki.searchPages')"
|
||||
class="search-input"
|
||||
/>
|
||||
<button v-if="pageSearch" class="search-clear" @click="pageSearch = ''">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- Batch actions -->
|
||||
<div v-if="batchMode" class="batch-bar">
|
||||
<label class="batch-check-all">
|
||||
<input type="checkbox" :checked="allSelected" @change="toggleSelectAll" />
|
||||
<span>{{ t('wiki.selectAll') }}</span>
|
||||
</label>
|
||||
<button
|
||||
class="batch-delete-btn"
|
||||
:disabled="selectedSlugs.length === 0"
|
||||
@click="handleBatchDelete"
|
||||
>
|
||||
{{ t('common.delete') }} ({{ selectedSlugs.length }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Raw material filter banner -->
|
||||
<div v-if="store.selectedRawId" class="filter-banner">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 3H2l8 9.46V19l4 2V12.46L22 3z"/></svg>
|
||||
{{ t('wiki.filteredByRaw') }}
|
||||
<button class="filter-clear-btn" @click="store.clearRawFilter(store.currentKB!.id)">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- Grouped page list -->
|
||||
<div class="page-list" v-if="!pageSearch" ref="pageListEl" @scroll="onPageListScroll">
|
||||
<div v-for="group in groupedPages" :key="group.type" class="page-group">
|
||||
<button
|
||||
class="group-header"
|
||||
@click="toggleGroup(group.type)"
|
||||
>
|
||||
<svg
|
||||
class="group-chevron"
|
||||
:class="{ expanded: !collapsedGroups.has(group.type) }"
|
||||
width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||
><polyline points="9 18 15 12 9 6"/></svg>
|
||||
<span class="group-label">{{ formatGroupLabel(group.type) }}</span>
|
||||
<span class="group-count">{{ group.pages.length }}</span>
|
||||
</button>
|
||||
<div v-if="!collapsedGroups.has(group.type)" class="group-items">
|
||||
<div
|
||||
v-for="page in paginatedGroupPages(group)" :key="page.slug"
|
||||
class="page-item"
|
||||
:class="{
|
||||
active: !batchMode && store.currentPage?.slug === page.slug,
|
||||
'page-item--system': page.pageType === 'system'
|
||||
}"
|
||||
@click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
|
||||
>
|
||||
<!-- RFC-051 PR-8: batch checkbox is disabled for protected pages so a stray
|
||||
batch-delete can't drag in overview/log or any locked page. -->
|
||||
<input
|
||||
v-if="batchMode"
|
||||
type="checkbox"
|
||||
:checked="selectedSlugs.includes(page.slug)"
|
||||
:disabled="isProtectedPage(page)"
|
||||
class="page-checkbox"
|
||||
@click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
|
||||
/>
|
||||
<div class="page-item-body">
|
||||
<div class="page-item-title">{{ page.title }}</div>
|
||||
<div class="page-item-meta">
|
||||
<span v-if="page.lastUpdatedBy === 'manual'" class="edit-dot manual" title="Manual edit"></span>
|
||||
<span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
|
||||
<span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
|
||||
<span class="meta-text">v{{ page.version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Load more within group (visible when more items exist) -->
|
||||
<button
|
||||
v-if="(groupPageLimit[group.type] || PAGE_STEP) < group.pages.length"
|
||||
class="load-more-btn"
|
||||
@click.stop="loadMoreGroup(group.type)"
|
||||
>
|
||||
{{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, group.pages.length - (groupPageLimit[group.type] || PAGE_STEP)) }) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="groupedPages.length === 0" class="empty-hint">{{ t('wiki.noPages') }}</div>
|
||||
|
||||
<!-- RFC-051 PR-7 follow-up: archived pages drawer at the bottom of the list. -->
|
||||
<div class="archived-section">
|
||||
<button
|
||||
class="archived-toggle"
|
||||
:disabled="archivedLoading"
|
||||
@click="toggleArchived"
|
||||
>
|
||||
<svg
|
||||
class="archived-chevron"
|
||||
:class="{ expanded: archivedOpen }"
|
||||
width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||
><polyline points="9 18 15 12 9 6"/></svg>
|
||||
{{ t('wiki.archivedSection') }}
|
||||
<span v-if="archivedPages.length > 0" class="archived-count">{{ archivedPages.length }}</span>
|
||||
</button>
|
||||
<div v-if="archivedOpen" class="archived-items">
|
||||
<div v-if="archivedLoading" class="archived-empty">{{ t('common.loading') }}</div>
|
||||
<div v-else-if="archivedPages.length === 0" class="archived-empty">{{ t('wiki.noArchived') }}</div>
|
||||
<div v-else
|
||||
v-for="page in archivedPages" :key="'arc:' + page.slug"
|
||||
class="archived-item"
|
||||
@click="openPage(page.slug)"
|
||||
>
|
||||
<div class="archived-item-body">
|
||||
<div class="archived-item-title">{{ page.title }}</div>
|
||||
<div class="archived-item-meta">v{{ page.version }} · {{ page.slug }}</div>
|
||||
</div>
|
||||
<button
|
||||
class="archived-restore-btn"
|
||||
:title="t('wiki.unarchive')"
|
||||
@click.stop="restoreArchivedPage(page.slug)"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="3 7 12 12 21 7"/><path d="M3 7v10l9 5 9-5V7"/>
|
||||
</svg>
|
||||
{{ t('wiki.unarchive') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flat search results -->
|
||||
<div class="page-list" v-else>
|
||||
<div
|
||||
v-for="page in paginatedSearch" :key="page.slug"
|
||||
class="page-item"
|
||||
:class="{
|
||||
active: !batchMode && store.currentPage?.slug === page.slug,
|
||||
'page-item--system': page.pageType === 'system'
|
||||
}"
|
||||
@click="batchMode ? toggleSelect(page.slug) : openPage(page.slug)"
|
||||
>
|
||||
<input
|
||||
v-if="batchMode"
|
||||
type="checkbox"
|
||||
:checked="selectedSlugs.includes(page.slug)"
|
||||
:disabled="isProtectedPage(page)"
|
||||
class="page-checkbox"
|
||||
@click.stop="!isProtectedPage(page) && toggleSelect(page.slug)"
|
||||
/>
|
||||
<div class="page-item-body">
|
||||
<div class="page-item-title">{{ page.title }}</div>
|
||||
<div class="page-item-meta">
|
||||
<span class="type-chip">{{ formatGroupLabel(page.pageType || 'other') }}</span>
|
||||
<span v-if="page.pageType === 'system'" class="page-flag page-flag--system">{{ t('wiki.systemPageBadge') }}</span>
|
||||
<span v-else-if="page.locked === 1" class="page-flag page-flag--locked">{{ t('wiki.lockedPageBadge') }}</span>
|
||||
<span class="meta-text">v{{ page.version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="filteredPages.length > searchPageLimit" class="pagination-row">
|
||||
<button class="load-more-btn" @click="searchPageLimit += PAGE_STEP">
|
||||
{{ t('wiki.loadMore', { n: Math.min(PAGE_STEP, filteredPages.length - searchPageLimit) }) }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="filteredPages.length === 0" class="empty-hint">{{ t('wiki.noResults') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Content -->
|
||||
<div class="wiki-content mc-surface-card">
|
||||
<div v-if="!store.currentKB" class="empty-state">
|
||||
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||||
</svg>
|
||||
<p>{{ t('wiki.selectKB') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="wiki-content-body">
|
||||
<div class="content-tabs">
|
||||
<button
|
||||
v-for="tab in tabs" :key="tab.key"
|
||||
class="tab-btn" :class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'raw'" class="tab-content">
|
||||
<RawMaterialPanel />
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'pages'" class="tab-content">
|
||||
<WikiPageViewer v-if="store.currentPage" />
|
||||
<div v-else class="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
||||
<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"/>
|
||||
</svg>
|
||||
<p>{{ t('wiki.selectPage') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'graph'" class="tab-content tab-content--graph">
|
||||
<WikiGraphView :pages="store.pages" @open-page="openPage" />
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'config'" class="tab-content tab-content--config">
|
||||
<WikiConfig />
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'hotCache'" class="tab-content tab-content--hot-cache">
|
||||
<HotCachePanel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WikiLibrary
|
||||
v-if="!store.currentKB"
|
||||
:kbs="store.knowledgeBases"
|
||||
:kb-stats="kbStats"
|
||||
:loading="store.loading"
|
||||
@open="enterKB"
|
||||
@create="showCreateKB = true"
|
||||
/>
|
||||
<WikiWorkspace
|
||||
v-else
|
||||
:kb="store.currentKB"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create KB Modal -->
|
||||
<div v-if="showCreateKB" class="modal-overlay" @click.self="showCreateKB = false">
|
||||
<div class="modal-content">
|
||||
<h3 class="modal-title">{{ t('wiki.createKB') }}</h3>
|
||||
@ -314,21 +38,16 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
|
||||
import { ref, reactive, watch, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useWikiStore, isProtectedPage, type WikiPage } from '@/stores/useWikiStore'
|
||||
import { useWikiStore } from '@/stores/useWikiStore'
|
||||
import { wikiApi } from '@/api/index'
|
||||
import RawMaterialPanel from './components/RawMaterialPanel.vue'
|
||||
import WikiPageViewer from './components/WikiPageViewer.vue'
|
||||
import WikiConfig from './components/WikiConfig.vue'
|
||||
import WikiGraphView from './components/WikiGraphView.vue'
|
||||
import HotCachePanel from './components/HotCachePanel.vue'
|
||||
import WikiLibrary from './components/WikiLibrary.vue'
|
||||
import WikiWorkspace from './components/WikiWorkspace.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const store = useWikiStore()
|
||||
const pageListEl = ref<HTMLElement | null>(null)
|
||||
|
||||
// KB health stats
|
||||
interface KBStats {
|
||||
pageCount: number
|
||||
enrichedPageCount: number
|
||||
@ -354,176 +73,9 @@ watch(() => store.knowledgeBases.length, () => {
|
||||
const showCreateKB = ref(false)
|
||||
const newKBName = ref('')
|
||||
const newKBDesc = ref('')
|
||||
const activeTab = ref('raw')
|
||||
const pageSearch = ref('')
|
||||
|
||||
// Batch selection
|
||||
const batchMode = ref(false)
|
||||
const selectedSlugs = ref<string[]>([])
|
||||
|
||||
// Pagination constants
|
||||
const PAGE_STEP = 20
|
||||
const searchPageLimit = ref(PAGE_STEP)
|
||||
|
||||
// Per-group pagination limit map
|
||||
const groupPageLimit = reactive<Record<string, number>>({})
|
||||
|
||||
// Which groups are collapsed
|
||||
const collapsedGroups = reactive<Set<string>>(new Set())
|
||||
|
||||
// RFC-051 PR-7 follow-up: archived pages drawer state.
|
||||
const archivedOpen = ref(false)
|
||||
const archivedLoading = ref(false)
|
||||
const archivedPages = ref<WikiPage[]>([])
|
||||
|
||||
async function toggleArchived() {
|
||||
archivedOpen.value = !archivedOpen.value
|
||||
if (archivedOpen.value && archivedPages.value.length === 0 && store.currentKB) {
|
||||
archivedLoading.value = true
|
||||
try {
|
||||
const res: any = await wikiApi.listArchivedPages(store.currentKB.id)
|
||||
archivedPages.value = (res?.data || res || []) as WikiPage[]
|
||||
} catch (e) {
|
||||
console.error('[Wiki] Failed to load archived pages', e)
|
||||
archivedPages.value = []
|
||||
} finally {
|
||||
archivedLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function restoreArchivedPage(slug: string) {
|
||||
if (!store.currentKB) return
|
||||
try {
|
||||
await wikiApi.unarchivePage(store.currentKB.id, slug)
|
||||
archivedPages.value = archivedPages.value.filter(p => p.slug !== slug)
|
||||
// Bring the page back into the main list cache.
|
||||
await store.fetchPages(store.currentKB.id)
|
||||
} catch (e: any) {
|
||||
console.error('[Wiki] Unarchive failed', e)
|
||||
alert(e?.message || 'Unarchive failed')
|
||||
}
|
||||
}
|
||||
|
||||
// Reset archived drawer when KB changes so we re-fetch on first open in the new KB.
|
||||
watch(() => store.currentKB?.id, () => {
|
||||
archivedOpen.value = false
|
||||
archivedPages.value = []
|
||||
})
|
||||
|
||||
function toggleGroup(type: string) {
|
||||
if (collapsedGroups.has(type)) collapsedGroups.delete(type)
|
||||
else collapsedGroups.add(type)
|
||||
}
|
||||
|
||||
function loadMoreGroup(type: string) {
|
||||
groupPageLimit[type] = (groupPageLimit[type] || PAGE_STEP) + PAGE_STEP
|
||||
}
|
||||
|
||||
function paginatedGroupPages(group: { type: string; pages: any[] }) {
|
||||
const limit = groupPageLimit[group.type] || PAGE_STEP
|
||||
return group.pages.slice(0, limit)
|
||||
}
|
||||
|
||||
function formatGroupLabel(type: string): string {
|
||||
if (!type) return t('wiki.pageTypes.other')
|
||||
const key = `wiki.pageTypes.${type.toLowerCase()}`
|
||||
const translated = t(key)
|
||||
// If i18n key not found it returns the key itself; fall back to capitalised type
|
||||
return translated === key ? (type.charAt(0).toUpperCase() + type.slice(1)) : translated
|
||||
}
|
||||
|
||||
// Type sort order
|
||||
const TYPE_ORDER = ['concept', 'technology', 'process', 'person', 'organization', 'product', 'place', 'event', 'term', 'other']
|
||||
|
||||
const filteredPages = computed(() => {
|
||||
const q = pageSearch.value.toLowerCase()
|
||||
if (!q) return store.pages
|
||||
return store.pages.filter(
|
||||
(p) => p.title.toLowerCase().includes(q) || p.slug.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
const paginatedSearch = computed(() => filteredPages.value.slice(0, searchPageLimit.value))
|
||||
|
||||
const groupedPages = computed(() => {
|
||||
const map = new Map<string, typeof store.pages>()
|
||||
for (const page of store.pages) {
|
||||
const type = (page.pageType || 'other').toLowerCase()
|
||||
if (!map.has(type)) map.set(type, [])
|
||||
map.get(type)!.push(page)
|
||||
}
|
||||
// Sort groups by TYPE_ORDER
|
||||
return [...map.entries()]
|
||||
.sort(([a], [b]) => {
|
||||
const ia = TYPE_ORDER.indexOf(a) >= 0 ? TYPE_ORDER.indexOf(a) : 99
|
||||
const ib = TYPE_ORDER.indexOf(b) >= 0 ? TYPE_ORDER.indexOf(b) : 99
|
||||
return ia - ib
|
||||
})
|
||||
.map(([type, pages]) => ({ type, pages }))
|
||||
})
|
||||
|
||||
// Reset pagination when KB changes
|
||||
watch(() => store.currentKB?.id, () => {
|
||||
searchPageLimit.value = PAGE_STEP
|
||||
Object.keys(groupPageLimit).forEach(k => delete groupPageLimit[k])
|
||||
collapsedGroups.clear()
|
||||
})
|
||||
|
||||
watch(() => pageSearch.value, () => {
|
||||
searchPageLimit.value = PAGE_STEP
|
||||
})
|
||||
|
||||
const allSelected = computed(() =>
|
||||
filteredPages.value.length > 0 && selectedSlugs.value.length === filteredPages.value.length
|
||||
)
|
||||
|
||||
function toggleSelect(slug: string) {
|
||||
const idx = selectedSlugs.value.indexOf(slug)
|
||||
if (idx >= 0) selectedSlugs.value.splice(idx, 1)
|
||||
else selectedSlugs.value.push(slug)
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
if (allSelected.value) selectedSlugs.value = []
|
||||
else selectedSlugs.value = filteredPages.value.map(p => p.slug)
|
||||
}
|
||||
|
||||
function exitBatchMode() {
|
||||
batchMode.value = false
|
||||
selectedSlugs.value = []
|
||||
}
|
||||
|
||||
async function handleBatchDelete() {
|
||||
if (selectedSlugs.value.length === 0 || !store.currentKB) return
|
||||
const confirmed = confirm(t('wiki.confirmBatchDelete', { count: selectedSlugs.value.length }))
|
||||
if (!confirmed) return
|
||||
try {
|
||||
await wikiApi.batchDeletePages(store.currentKB.id, selectedSlugs.value)
|
||||
exitBatchMode()
|
||||
await store.fetchPages(store.currentKB.id)
|
||||
} catch (e: any) {
|
||||
alert(e?.message || 'Batch delete failed')
|
||||
}
|
||||
}
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ key: 'raw', label: t('wiki.rawMaterials') },
|
||||
{ key: 'pages', label: t('wiki.pages') },
|
||||
{ key: 'graph', label: t('wiki.graph.tab') },
|
||||
{ key: 'config', label: t('wiki.config') },
|
||||
{ key: 'hotCache', label: t('wiki.hotCache.tab') },
|
||||
])
|
||||
|
||||
async function selectKB(id: number) {
|
||||
async function enterKB(id: number) {
|
||||
await store.selectKB(id)
|
||||
activeTab.value = 'raw'
|
||||
}
|
||||
|
||||
async function openPage(slug: string) {
|
||||
if (!store.currentKB) return
|
||||
await store.loadPage(store.currentKB.id, slug)
|
||||
activeTab.value = 'pages'
|
||||
}
|
||||
|
||||
async function handleCreateKB() {
|
||||
@ -533,23 +85,6 @@ async function handleCreateKB() {
|
||||
newKBDesc.value = ''
|
||||
}
|
||||
|
||||
// Infinite scroll: when the page-list container scrolls near the bottom,
|
||||
// auto-load more items for the last non-fully-expanded group.
|
||||
function onPageListScroll() {
|
||||
const el = pageListEl.value
|
||||
if (!el) return
|
||||
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 60) {
|
||||
// Find the first group that still has hidden pages and load more
|
||||
for (const group of groupedPages.value) {
|
||||
const limit = groupPageLimit[group.type] || PAGE_STEP
|
||||
if (limit < group.pages.length) {
|
||||
loadMoreGroup(group.type)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchKnowledgeBases()
|
||||
})
|
||||
@ -558,319 +93,14 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.wiki-shell { background: transparent; height: 100%; min-height: 0; overflow: hidden; }
|
||||
.wiki-frame { height: min(calc(100vh - 28px), 100%); min-height: 0; overflow: hidden; }
|
||||
.wiki-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
|
||||
.wiki-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; }
|
||||
|
||||
.btn-primary { display: flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); transition: opacity 0.15s; }
|
||||
.btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--mc-primary), var(--mc-primary-hover)); color: white; border: none; border-radius: 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--mc-shadow-soft); transition: opacity 0.15s; }
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-primary:disabled { background: var(--mc-border); box-shadow: none; cursor: not-allowed; }
|
||||
.btn-secondary { padding: 8px 16px; background: var(--mc-bg-elevated); color: var(--mc-text-primary); border: 1px solid var(--mc-border); border-radius: 12px; font-size: 14px; cursor: pointer; transition: background 0.15s; }
|
||||
.btn-secondary:hover { background: var(--mc-bg-sunken); }
|
||||
|
||||
/* Layout */
|
||||
.wiki-layout { display: flex; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
|
||||
|
||||
/* Sidebar */
|
||||
.wiki-sidebar {
|
||||
width: 272px;
|
||||
min-width: 272px;
|
||||
overflow-y: auto;
|
||||
padding: 14px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.sidebar-section--pages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
|
||||
|
||||
.sidebar-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--mc-text-tertiary);
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 16px;
|
||||
padding: 0 5px;
|
||||
background: var(--mc-bg-sunken);
|
||||
color: var(--mc-text-secondary);
|
||||
border-radius: 9999px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 10px;
|
||||
background: var(--mc-bg-muted);
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 10px;
|
||||
color: var(--mc-text-tertiary);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.search-wrap:focus-within { border-color: var(--mc-primary); }
|
||||
.search-input { flex: 1; border: none; background: transparent; font-size: 12px; color: var(--mc-text-primary); outline: none; }
|
||||
.search-input::placeholder { color: var(--mc-text-tertiary); }
|
||||
.search-clear { border: none; background: none; cursor: pointer; color: var(--mc-text-tertiary); font-size: 11px; padding: 0; line-height: 1; }
|
||||
.search-clear:hover { color: var(--mc-text-secondary); }
|
||||
|
||||
/* KB list */
|
||||
.kb-list { display: flex; flex-direction: column; gap: 4px; }
|
||||
.kb-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.kb-item:hover { background: var(--mc-bg-muted); }
|
||||
.kb-item.active { background: var(--mc-primary-bg); border-color: rgba(217, 109, 70, 0.15); }
|
||||
.kb-item-name { font-size: 13px; font-weight: 600; color: var(--mc-text-primary); margin-bottom: 5px; }
|
||||
.kb-item-stats { display: flex; align-items: center; gap: 6px; }
|
||||
.stat-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
color: var(--mc-text-tertiary);
|
||||
}
|
||||
.kb-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.kb-status-dot.active { background: var(--mc-success); }
|
||||
.kb-status-dot.processing { background: var(--mc-primary); animation: pulse 1.4s ease-in-out infinite; }
|
||||
.kb-status-dot.error { background: var(--mc-danger); }
|
||||
.kb-warn { font-size: 11px; color: var(--mc-danger); margin-top: 3px; }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* Page list and groups */
|
||||
.sidebar-title-row { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
|
||||
.sidebar-title-actions { display: flex; gap: 4px; }
|
||||
.icon-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--mc-border-light);
|
||||
background: var(--mc-bg-elevated);
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
color: var(--mc-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.icon-btn:hover { background: var(--mc-bg-sunken); color: var(--mc-primary); }
|
||||
.icon-btn--active { color: var(--mc-primary); border-color: var(--mc-primary); }
|
||||
|
||||
.page-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
|
||||
|
||||
.page-group { display: flex; flex-direction: column; }
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 6px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background 0.12s;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.group-header:hover { background: var(--mc-bg-muted); }
|
||||
.group-chevron { color: var(--mc-text-tertiary); transition: transform 0.18s; flex-shrink: 0; }
|
||||
.group-chevron.expanded { transform: rotate(90deg); }
|
||||
.group-label { font-size: 11px; font-weight: 600; color: var(--mc-text-secondary); flex: 1; }
|
||||
.group-count {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
background: var(--mc-bg-sunken);
|
||||
color: var(--mc-text-tertiary);
|
||||
border-radius: 9999px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.group-items { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; }
|
||||
|
||||
.page-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.page-item:hover { background: var(--mc-bg-muted); }
|
||||
.page-item.active { background: var(--mc-primary-bg); border-color: rgba(217, 109, 70, 0.12); }
|
||||
.page-item-body { flex: 1; min-width: 0; }
|
||||
.page-item-title { font-size: 12px; color: var(--mc-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.page-item-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
|
||||
.meta-text { font-size: 10px; color: var(--mc-text-tertiary); }
|
||||
.type-chip { font-size: 10px; padding: 1px 5px; background: var(--mc-bg-sunken); border-radius: 4px; color: var(--mc-text-tertiary); }
|
||||
.edit-dot { width: 5px; height: 5px; border-radius: 9999px; flex-shrink: 0; }
|
||||
.edit-dot.manual { background: var(--mc-primary); }
|
||||
.page-checkbox { flex-shrink: 0; cursor: pointer; }
|
||||
.page-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
|
||||
|
||||
/* RFC-051 PR-8: protection flag chips inside the page-item meta line. */
|
||||
.page-flag { font-size: 10px; padding: 1px 6px; border-radius: 99px; font-weight: 600; }
|
||||
.page-flag--system { background: var(--mc-primary-bg); color: var(--mc-primary); border: 1px solid var(--mc-primary); }
|
||||
.page-flag--locked { background: var(--mc-bg-elevated); color: var(--mc-text-secondary); border: 1px solid var(--mc-border-light); }
|
||||
|
||||
/* Subtle accent on the row itself so system pages read as "managed by the system". */
|
||||
.page-item--system { border-left: 2px solid var(--mc-primary); padding-left: 6px; }
|
||||
|
||||
/* RFC-051 PR-7 follow-up: archived drawer at the bottom of the page list. */
|
||||
.archived-section { margin-top: 12px; border-top: 1px dashed var(--mc-border-light); padding-top: 8px; }
|
||||
.archived-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding: 6px 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 11px;
|
||||
color: var(--mc-text-tertiary);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.archived-toggle:hover { color: var(--mc-text-secondary); }
|
||||
.archived-toggle:disabled { cursor: wait; opacity: 0.5; }
|
||||
.archived-chevron { transition: transform 0.15s; flex-shrink: 0; }
|
||||
.archived-chevron.expanded { transform: rotate(90deg); }
|
||||
.archived-count {
|
||||
margin-left: auto;
|
||||
padding: 0 6px;
|
||||
background: var(--mc-bg-sunken);
|
||||
border-radius: 99px;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.archived-items { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
|
||||
.archived-empty { padding: 6px 4px; font-size: 11px; font-style: italic; color: var(--mc-text-tertiary); }
|
||||
.archived-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.1s, background 0.1s;
|
||||
}
|
||||
.archived-item:hover { opacity: 1; background: var(--mc-bg-muted); }
|
||||
.archived-item-body { flex: 1; min-width: 0; }
|
||||
.archived-item-title { font-size: 12px; font-weight: 500; color: var(--mc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.archived-item-meta { font-size: 10px; color: var(--mc-text-tertiary); margin-top: 1px; }
|
||||
|
||||
.archived-restore-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--mc-border-light);
|
||||
border-radius: 6px;
|
||||
background: none;
|
||||
color: var(--mc-text-secondary);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.archived-restore-btn:hover { color: var(--mc-primary); border-color: var(--mc-primary); background: var(--mc-primary-bg); }
|
||||
|
||||
.load-more-btn {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
border: 1px dashed var(--mc-border-light);
|
||||
background: none;
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--mc-text-tertiary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.load-more-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); background: var(--mc-primary-bg); }
|
||||
|
||||
.pagination-row { padding: 4px 0; }
|
||||
|
||||
/* Batch */
|
||||
.batch-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--mc-bg-muted); border-radius: 8px; }
|
||||
.batch-check-all { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mc-text-secondary); cursor: pointer; }
|
||||
.batch-check-all input { cursor: pointer; }
|
||||
.batch-delete-btn { padding: 3px 10px; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(245, 108, 108, 0.1); color: var(--el-color-danger, #f56c6c); }
|
||||
.batch-delete-btn:hover:not(:disabled) { background: rgba(245, 108, 108, 0.2); }
|
||||
.batch-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.empty-hint { font-size: 13px; color: var(--mc-text-tertiary); padding: 12px 4px; }
|
||||
|
||||
.filter-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
background: var(--mc-primary-bg);
|
||||
border: 1px solid rgba(217,109,70,0.2);
|
||||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--mc-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
.filter-clear-btn {
|
||||
margin-left: auto;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: var(--mc-primary);
|
||||
font-size: 11px;
|
||||
padding: 0 2px;
|
||||
opacity: 0.7;
|
||||
line-height: 1;
|
||||
}
|
||||
.filter-clear-btn:hover { opacity: 1; }
|
||||
|
||||
/* Content area */
|
||||
.wiki-content { flex: 1; overflow: hidden; min-width: 0; padding: 16px; display: flex; flex-direction: column; min-height: 0; }
|
||||
.wiki-content-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
|
||||
.content-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mc-bg-muted); border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--mc-border-light); align-self: flex-start; }
|
||||
.tab-btn { padding: 7px 14px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--mc-text-secondary); border-radius: 10px; transition: all 0.15s; font-weight: 500; }
|
||||
.tab-btn:hover { color: var(--mc-text-primary); }
|
||||
.tab-btn.active { color: var(--mc-primary); background: var(--mc-bg-elevated); box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 600; }
|
||||
.tab-content { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
|
||||
.tab-content--config { overflow: hidden; padding-right: 0; }
|
||||
.tab-content--graph { overflow: hidden; padding: 0; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; color: var(--mc-text-tertiary); text-align: center; }
|
||||
.empty-state p { font-size: 14px; }
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
|
||||
.modal-content { background: var(--mc-bg-elevated); border: 1px solid var(--mc-border); border-radius: 18px; width: 100%; max-width: 520px; padding: 24px; box-shadow: 0 24px 64px rgba(0,0,0,0.18); }
|
||||
.modal-title { font-size: 17px; font-weight: 700; color: var(--mc-text-primary); margin: 0 0 18px; }
|
||||
@ -882,10 +112,5 @@ onMounted(() => {
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.wiki-frame { height: 100%; min-height: calc(100vh - 28px); }
|
||||
.wiki-layout { flex-direction: column; overflow: visible; }
|
||||
.wiki-sidebar { width: 100%; min-width: 0; max-height: 320px; }
|
||||
.wiki-content { overflow: visible; }
|
||||
.tab-content { overflow: visible; }
|
||||
.tab-content--config { overflow: visible; }
|
||||
}
|
||||
</style>
|
||||
|
||||
72
mateclaw-ui/src/views/Wiki/utils/kbVisual.ts
Normal file
72
mateclaw-ui/src/views/Wiki/utils/kbVisual.ts
Normal file
@ -0,0 +1,72 @@
|
||||
// Visual helpers shared between the library grid and the workspace header so
|
||||
// the same KB shows the same color and initial wherever it appears.
|
||||
|
||||
import type { WikiKB } from '@/stores/useWikiStore'
|
||||
|
||||
interface PaletteEntry {
|
||||
bg: string
|
||||
fg: string
|
||||
}
|
||||
|
||||
// Eight-color palette tuned to the warm/earthy brand. Each entry sits around
|
||||
// 45-55% lightness with mid saturation so colors stay distinct but live in the
|
||||
// same room as the rust-orange primary.
|
||||
const KB_PALETTE: PaletteEntry[] = [
|
||||
{ bg: 'hsl(20, 68%, 50%)', fg: '#fff' }, // terracotta
|
||||
{ bg: 'hsl(155, 32%, 42%)', fg: '#fff' }, // sage green
|
||||
{ bg: 'hsl(212, 45%, 48%)', fg: '#fff' }, // dusk blue
|
||||
{ bg: 'hsl(285, 30%, 50%)', fg: '#fff' }, // mauve
|
||||
{ bg: 'hsl(38, 72%, 50%)', fg: '#fff' }, // amber
|
||||
{ bg: 'hsl(195, 28%, 42%)', fg: '#fff' }, // slate teal
|
||||
{ bg: 'hsl(232, 38%, 52%)', fg: '#fff' }, // indigo
|
||||
{ bg: 'hsl(8, 62%, 50%)', fg: '#fff' }, // rosewood
|
||||
]
|
||||
|
||||
type KBLike = Pick<WikiKB, 'id'> & { name?: string }
|
||||
|
||||
// IDs are server-side snowflakes and exceed JS safe-int range, so numeric `% N`
|
||||
// loses all low bits and collapses to a single bucket. Hash the string form
|
||||
// instead, mixing in the name so re-opening the same KB stays color-stable.
|
||||
function paletteFor(kb: KBLike): PaletteEntry {
|
||||
const seed = String(kb.id ?? '') + '|' + (kb.name || '')
|
||||
let h = 5381
|
||||
for (let i = 0; i < seed.length; i++) {
|
||||
h = ((h << 5) + h + seed.charCodeAt(i)) | 0
|
||||
}
|
||||
const idx = ((h % KB_PALETTE.length) + KB_PALETTE.length) % KB_PALETTE.length
|
||||
return KB_PALETTE[idx]
|
||||
}
|
||||
|
||||
export function kbAccent(kb: KBLike): string {
|
||||
return paletteFor(kb).bg
|
||||
}
|
||||
|
||||
export function kbAccentFg(kb: KBLike): string {
|
||||
return paletteFor(kb).fg
|
||||
}
|
||||
|
||||
export function kbInitial(kb: { name?: string }): string {
|
||||
if (!kb.name) return '?'
|
||||
// Take the first visible character — works for both ASCII and CJK.
|
||||
const ch = Array.from(kb.name.trim())[0]
|
||||
return (ch || '?').toUpperCase()
|
||||
}
|
||||
|
||||
export function relativeTime(iso: string | null | undefined, isZh: boolean): string {
|
||||
if (!iso) return ''
|
||||
const then = new Date(iso).getTime()
|
||||
if (Number.isNaN(then)) return ''
|
||||
const diffMs = Date.now() - then
|
||||
const sec = Math.floor(diffMs / 1000)
|
||||
if (sec < 60) return isZh ? '刚刚' : 'just now'
|
||||
const min = Math.floor(sec / 60)
|
||||
if (min < 60) return isZh ? `${min} 分钟前` : `${min}m ago`
|
||||
const hr = Math.floor(min / 60)
|
||||
if (hr < 24) return isZh ? `${hr} 小时前` : `${hr}h ago`
|
||||
const day = Math.floor(hr / 24)
|
||||
if (day < 30) return isZh ? `${day} 天前` : `${day}d ago`
|
||||
const mon = Math.floor(day / 30)
|
||||
if (mon < 12) return isZh ? `${mon} 个月前` : `${mon}mo ago`
|
||||
const yr = Math.floor(day / 365)
|
||||
return isZh ? `${yr} 年前` : `${yr}y ago`
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user