大屏页面初始化
This commit is contained in:
@@ -1,17 +1,349 @@
|
||||
<template>
|
||||
<!-- Dashboard自身的内容（后台首页） -->
|
||||
<div class="dashboard-container">
|
||||
<h1>后台首页</h1>
|
||||
<div class="stats">数据概览、快捷入口等</div>
|
||||
<div class="search-list-page">
|
||||
<div class="search-section">
|
||||
<div class="search-wrapper">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="请输入搜索关键词"
|
||||
class="search-input"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<div class="search-btn-group">
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Refresh" @click="handleReset">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs-section">
|
||||
<el-tabs v-model="activeTab" @tab-change="handleTabChange">
|
||||
<el-tab-pane
|
||||
v-for="tab in tabList"
|
||||
:key="tab.key"
|
||||
:label="tab.name"
|
||||
:name="tab.key"
|
||||
>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper">
|
||||
<div class="list-section">
|
||||
<div v-if="listData.length === 0" class="empty-tip">
|
||||
<el-empty description="暂无数据" />
|
||||
</div>
|
||||
|
||||
<div v-else class="card-list">
|
||||
<el-card
|
||||
v-for="item in listData"
|
||||
:key="item.id"
|
||||
class="list-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<div class="card-top">
|
||||
<div class="site-avatar">
|
||||
<el-icon size="24"><Link /></el-icon>
|
||||
</div>
|
||||
<div class="site-main">
|
||||
<div class="site-name">{{ item.siteName }}</div>
|
||||
<el-tooltip :content="item.siteUrl" placement="top">
|
||||
<div class="site-url">{{ item.siteUrl }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-divider"></div>
|
||||
<div class="card-bottom">
|
||||
<span class="card-date">{{ item.date }}</span>
|
||||
<div class="card-actions">
|
||||
<el-button size="small" type="primary" link @click="handleVisit(item)">
|
||||
<el-icon><Link /></el-icon>
|
||||
访问
|
||||
</el-button>
|
||||
<el-button size="small" type="text" @click="handleDetail(item)">详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pagination-footer">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[ 20, 50, 99]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 无需引入Layout，Layout已作为路由层的父组件
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Link } from '@element-plus/icons-vue'
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: ''
|
||||
})
|
||||
|
||||
const tabList = ref([
|
||||
{ key: 'tab1', name: '标签一' },
|
||||
{ key: 'tab2', name: '标签二' },
|
||||
{ key: 'tab3', name: '标签三' }
|
||||
])
|
||||
const activeTab = ref('tab1')
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const listData = ref([])
|
||||
const fetchData = () => {
|
||||
}
|
||||
|
||||
const handleVisit = (item) => {
|
||||
window.open(item.siteUrl, '_blank')
|
||||
}
|
||||
|
||||
const handleDetail = (item) => {
|
||||
ElMessage.info(`查看 ${item.siteName} 详情`)
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.keyword = ''
|
||||
pagination.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleTabChange = (tabKey) => {
|
||||
pagination.pageNum = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.pageSize = val
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.pageNum = val
|
||||
fetchData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
.search-list-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-btn-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tabs-section {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
margin-bottom: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.list-card {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.list-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: #409eff !important;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.site-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #f0f7ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #409eff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #1f2937;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-url {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-url:hover {
|
||||
color: #409eff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.list-section::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user