237 lines
10 KiB
Vue
237 lines
10 KiB
Vue
<template>
|
||
<section class="knowledge-page">
|
||
<div class="knowledge-grid" :class="{ 'has-preview': selectedDocument }">
|
||
<section class="knowledge-main">
|
||
<article class="library-panel panel">
|
||
<header class="panel-title">
|
||
<div>
|
||
<h2>文档库 / 文件夹</h2>
|
||
<p>默认展示文件列表，点击具体文件后可在右侧展开预览。</p>
|
||
</div>
|
||
<span class="preview-hint" :class="{ active: selectedDocument }">
|
||
{{ selectedDocument ? '预览已展开' : '点击文件可预览' }}
|
||
</span>
|
||
</header>
|
||
|
||
<div class="library-body">
|
||
<aside class="folder-rail">
|
||
<label class="folder-search">
|
||
<i class="mdi mdi-magnify"></i>
|
||
<input v-model="folderSearch" type="search" placeholder="搜索文件夹" />
|
||
<button type="button" aria-label="新增文件夹"><i class="mdi mdi-plus"></i></button>
|
||
</label>
|
||
|
||
<nav class="folder-tree" aria-label="知识库文件夹">
|
||
<button
|
||
v-for="folder in filteredFolders"
|
||
:key="folder.name"
|
||
type="button"
|
||
:class="{ active: activeFolder === folder.name }"
|
||
@click="activeFolder = folder.name"
|
||
>
|
||
<i :class="folder.icon"></i>
|
||
<span>{{ folder.name }}</span>
|
||
<b>{{ folder.count }}</b>
|
||
</button>
|
||
</nav>
|
||
|
||
<button class="new-folder-btn" type="button">
|
||
<i class="mdi mdi-plus"></i>
|
||
<span>新建文件夹</span>
|
||
</button>
|
||
</aside>
|
||
|
||
<section class="document-area">
|
||
<div class="upload-zone">
|
||
<i class="mdi mdi-cloud-upload"></i>
|
||
<strong>拖拽文档到此处，或点击上传</strong>
|
||
<span>支持 PDF / Word / Excel / PPT 文档，单个文件不超过 100MB</span>
|
||
</div>
|
||
|
||
<div class="doc-table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>文件名称</th>
|
||
<th>标签</th>
|
||
<th>上传时间 <i class="mdi mdi-arrow-down"></i></th>
|
||
<th>版本</th>
|
||
<th>状态</th>
|
||
<th>上传人</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr
|
||
v-for="doc in visibleDocuments"
|
||
:key="doc.name"
|
||
class="doc-row"
|
||
:class="{ selected: selectedDocument?.name === doc.name }"
|
||
@click="selectedDocument = doc"
|
||
>
|
||
<td>
|
||
<span class="file-name">
|
||
<i :class="doc.icon"></i>
|
||
{{ doc.name }}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<span class="doc-tag">{{ doc.tag }}</span>
|
||
</td>
|
||
<td>{{ doc.time }}</td>
|
||
<td>{{ doc.version }}</td>
|
||
<td><span class="state-tag" :class="doc.stateTone">{{ doc.state }}</span></td>
|
||
<td>{{ doc.owner }}</td>
|
||
<td>
|
||
<button class="more-btn" type="button" aria-label="更多操作" @click.stop>
|
||
<i class="mdi mdi-dots-horizontal"></i>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<footer class="list-foot">
|
||
<template v-if="false">
|
||
<span>共 {{ filteredDocuments.length }} 条</span>
|
||
<button type="button">10条/页 <i class="mdi mdi-chevron-down"></i></button>
|
||
<div class="pager" aria-label="分页">
|
||
<button type="button" aria-label="上一页"><i class="mdi mdi-chevron-left"></i></button>
|
||
<button class="active" type="button" aria-current="page">1</button>
|
||
<button type="button">2</button>
|
||
<button type="button" aria-label="下一页"><i class="mdi mdi-chevron-right"></i></button>
|
||
</div>
|
||
<label>前往 <input value="1" aria-label="页码" /> 页</label>
|
||
</template>
|
||
<span class="page-summary">共 {{ totalCount }} 条，目前第 {{ currentPage }} 页</span>
|
||
<div class="pager" aria-label="分页">
|
||
<button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--">
|
||
<i class="mdi mdi-chevron-left"></i>
|
||
</button>
|
||
<button
|
||
v-for="page in totalPages"
|
||
:key="page"
|
||
class="page-number"
|
||
:class="{ active: currentPage === page }"
|
||
type="button"
|
||
:aria-current="currentPage === page ? 'page' : undefined"
|
||
@click="currentPage = page"
|
||
>
|
||
{{ page }}
|
||
</button>
|
||
<button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++">
|
||
<i class="mdi mdi-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="page-size-wrap">
|
||
<button class="page-size" type="button" @click="pageSizeOpen = !pageSizeOpen">
|
||
{{ pageSize }} 条/页<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
<div v-if="pageSizeOpen" class="page-size-dropdown" role="listbox">
|
||
<button
|
||
v-for="size in pageSizes"
|
||
:key="size"
|
||
type="button"
|
||
role="option"
|
||
:aria-selected="pageSize === size"
|
||
:class="{ active: pageSize === size }"
|
||
@click="changePageSize(size)"
|
||
>
|
||
{{ size }} 条/页
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<Transition name="preview-panel">
|
||
<aside v-if="selectedDocument" class="preview-column">
|
||
<article class="preview-panel panel">
|
||
<header class="preview-head">
|
||
<div>
|
||
<span class="preview-kicker">文件预览</span>
|
||
<h2>{{ selectedDocument.name }}</h2>
|
||
<p>{{ selectedDocument.summary }}</p>
|
||
</div>
|
||
|
||
<div class="preview-actions">
|
||
<button type="button" class="mini-action">
|
||
<i class="mdi mdi-download"></i>
|
||
<span>下载</span>
|
||
</button>
|
||
<button type="button" class="icon-action" aria-label="关闭预览" @click="selectedDocument = null">
|
||
<i class="mdi mdi-close"></i>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="preview-meta">
|
||
<span><i class="mdi mdi-tag-outline"></i>{{ selectedDocument.tag }}</span>
|
||
<span><i class="mdi mdi-history"></i>{{ selectedDocument.time }}</span>
|
||
<span><i class="mdi mdi-account-circle-outline"></i>{{ selectedDocument.owner }}</span>
|
||
<span><i class="mdi mdi-source-branch"></i>{{ selectedDocument.version }}</span>
|
||
</div>
|
||
|
||
<div class="preview-viewer">
|
||
<div class="viewer-toolbar">
|
||
<div class="viewer-filetype" :class="selectedDocument.fileType">
|
||
<i :class="selectedDocument.icon"></i>
|
||
<span>{{ selectedDocument.fileTypeLabel }}</span>
|
||
</div>
|
||
<div class="viewer-toolbar-actions">
|
||
<button type="button"><i class="mdi mdi-magnify-minus-outline"></i></button>
|
||
<button type="button"><i class="mdi mdi-magnify-plus-outline"></i></button>
|
||
<button type="button"><i class="mdi mdi-fit-to-page-outline"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-stage">
|
||
<article
|
||
v-for="(page, index) in selectedDocument.previewPages"
|
||
:key="`${selectedDocument.name}-${index}`"
|
||
class="page-sheet"
|
||
:style="{ '--page-delay': `${index * 70}ms` }"
|
||
>
|
||
<header class="page-title">
|
||
<div>
|
||
<strong>{{ page.title }}</strong>
|
||
<span>{{ page.subtitle }}</span>
|
||
</div>
|
||
<b>第 {{ index + 1 }} 页</b>
|
||
</header>
|
||
|
||
<section class="page-summary">
|
||
<div class="summary-grid">
|
||
<div v-for="item in page.stats" :key="item.label" class="summary-item">
|
||
<span>{{ item.label }}</span>
|
||
<strong>{{ item.value }}</strong>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page-content">
|
||
<div v-for="block in page.blocks" :key="block.heading" class="content-block">
|
||
<h3>{{ block.heading }}</h3>
|
||
<ul>
|
||
<li v-for="line in block.lines" :key="line">{{ line }}</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</aside>
|
||
</Transition>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script src="./scripts/PoliciesView.js"></script>
|
||
|
||
<style scoped src="../assets/styles/views/policies-view.css"></style>
|