大屏项目初始化

screen-vue/src/views/desktop/index.vue

@@ -3,8 +3,8 @@
     <div class="search-section">
       <div class="search-wrapper">
         <el-input
-          v-model="searchForm.keyword"
-          placeholder="请输入搜索关键词"
+          v-model="searchForm.websiteName"
+          placeholder="请输入搜索网站名称"
           class="search-input"
           clearable
           @keyup.enter="handleSearch"
@@ -16,63 +16,47 @@
       </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"
+            :key="item.websiteId"
             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 :content="item.websiteName" placement="top">
+                  <div class="site-name">{{ item.websiteName }}</div>
+                </el-tooltip>
+                <el-tooltip :content="item.websiteUrl" placement="top">
+                  <div class="site-url">{{ item.websiteUrl }}</div>
                 </el-tooltip>
               </div>
             </div>
             <div class="card-divider"></div>
             <div class="card-bottom">
-              <span class="card-date">{{ item.date }}</span>
+              <span class="card-date">{{ item.createTime }}</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]"
+        :page-sizes="[20, 50, 99]"
         :total="pagination.total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleSizeChange"
@@ -87,18 +71,12 @@
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Link } from '@element-plus/icons-vue'
+import { getWebsiteStorageList } from '@/api/bizWebsiteStorage'
 
 const searchForm = reactive({
-  keyword: ''
+  websiteName: ''
 })
 
-const tabList = ref([
-  { key: 'tab1', name: '标签一' },
-  { key: 'tab2', name: '标签二' },
-  { key: 'tab3', name: '标签三' }
-])
-const activeTab = ref('tab1')
-
 const pagination = reactive({
   pageNum: 1,
   pageSize: 20,
@@ -106,45 +84,50 @@ const pagination = reactive({
 })
 
 const listData = ref([])
-const fetchData = () => {
+const getDataList = async () => {
+  try {
+    const reqParmas = {
+      ...searchForm,
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize,
+    }
+    const res = await getWebsiteStorageList(reqParmas)
+    listData.value = res.list || []
+    pagination.total = res.total
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 const handleVisit = (item) => {
-  window.open(item.siteUrl, '_blank')
-}
-
-const handleDetail = (item) => {
-  ElMessage.info(`查看 ${item.siteName} 详情`)
+  window.open(item.websiteUrl, '_blank')
 }
 
 const handleSearch = () => {
   pagination.pageNum = 1
-  fetchData()
+  getDataList()
 }
 
 const handleReset = () => {
-  searchForm.keyword = ''
+  Object.assign(searchForm, {
+    websiteName: ''
+  })
   pagination.pageNum = 1
-  fetchData()
-}
-
-const handleTabChange = (tabKey) => {
-  pagination.pageNum = 1
-  fetchData()
+  getDataList()
 }
 
 const handleSizeChange = (val) => {
   pagination.pageSize = val
-  fetchData()
+  getDataList()
 }
 
 const handleCurrentChange = (val) => {
   pagination.pageNum = val
-  fetchData()
+  getDataList()
 }
 
 onMounted(() => {
-  fetchData()
+  getDataList()
 })
 </script>
 
@@ -180,14 +163,7 @@ onMounted(() => {
 
 .search-btn-group {
   display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.tabs-section {
-  width: 100%;
-  border-bottom: 1px solid #e5e7eb;
-  margin-bottom: 16px;
+  gap: 2px;
   flex-shrink: 0;
 }
 
@@ -241,21 +217,9 @@ onMounted(() => {
 
 .card-top {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   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;
+  padding: 6px 12px 4px;
 }
 
 .site-main {
@@ -267,7 +231,7 @@ onMounted(() => {
   font-weight: 600;
   font-size: 16px;
   color: #1f2937;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -290,14 +254,14 @@ onMounted(() => {
 .card-divider {
   height: 1px;
   background: #f0f0f0;
-  margin: 0 16px;
+  margin: 0 12px;
 }
 
 .card-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 16px;
+  padding: 8px 12px 8px;
 }
 
 .card-date {