api & ui update

2026-02-03 22:44:47 +08:00 · 2025-01-27 22:39:08 +08:00
parent 19a34d0274
commit e90614ab97
5 changed files with 142 additions and 50 deletions
--- a/client/src/components/index/FilmList.vue
+++ b/client/src/components/index/FilmList.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="c_content" v-if="d.list" >
+  <div class="c_content" v-if="d.list">
    <template v-if="d.list.length > 0">
-      <div class="item" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
-        <div v-if="item.id != -99">
+      <div class="item film-card" v-for="item in d.list" :style="{width: `calc(${d.width-1}%)`}">
+        <div v-if="item.id != -99 && global.isMobile" class="hidden-md-and-up">
          <a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
            <div class="tag_group">
              <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
@@ -15,6 +15,30 @@
          <a :href="`/filmDetail?link=${item.id}`" class="content_text_tag">{{ item.name.split("[")[0] }}</a>
          <span class="cus_remark hidden-md-and-down">{{ item.remarks }}</span>
        </div>
+
+        <div v-if="!global.isMobile"  class="film-card-inner">
+          <div class="film-card-front">
+            <a :href="`/filmDetail?link=${item.id}`" class="default_image link_content">
+              <div class="tag_group">
+                <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
+                <span class="cus_tag ">{{ item.cName }}</span>
+                <span class="cus_tag ">{{ item.area.split(',')[0] }}</span>
+              </div>
+              <span class="cus_remark hidden-md-and-up">{{ item.remarks }}</span>
+              <img :src="item.picture" :alt="item.name?.split('[')[0]" @error="handleImg">
+            </a>
+          </div>
+          <div class="film-card-back">
+            <p class="card-title" >{{item.name}}</p>
+            <p v-show="item.blurb != ''" class="card-blurb">{{ item.blurb }}</p>
+            <p v-show="item.blurb == ''" class="card-blurb"> 暂无简介 </p>
+            <el-button class="card-detail" :icon="Discount" color="#626aef" plain round onclick="goDetail(item.id)" >详情</el-button>
+          </div>
+        </div>
+        <a v-if="!global.isMobile" :href="`/filmDetail?link=${item.id}`" class="content_text_tag hidden-sm-and-down">{{ item.name.split("[")[0] }}</a>
+
+
+
      </div>
    </template>
    <el-empty v-if="d.list.length <= 0" style="padding: 10px 0;margin: 0 auto" description="暂无相关数据"/>
@@ -22,7 +46,8 @@
 </template>

 <script setup lang="ts">
-import {defineProps, onMounted, reactive, watch, watchEffect} from 'vue'
+import {defineProps, inject, reactive, watchEffect} from 'vue'
+import {Discount} from "@element-plus/icons-vue";

 const props = defineProps({
  list: Array,
@@ -34,11 +59,16 @@ const d = reactive({
  width: 0,
 })

+const global = inject('global')
 // 图片加载失败事件
 const handleImg = (e: Event) => {
  e.target.style.display = "none"
 }

+const goDetail = (id:number) =>{
+  location.href = `/filmDetail?link=${id}`
+}
+
 // 监听父组件传递的参数的变化
 watchEffect(() => {
  // 首先获取当前设备类型
@@ -158,18 +188,17 @@ watchEffect(() => {
    justify-content: space-between;
  }

-  .c_content .item {
+  .item {
    margin-bottom: 20px;
    box-sizing: border-box;
  }

-  .item .link_content {
-    border-radius: 5px;
-    padding-top: 125%;
+  .link_content {
+    /*    padding-top: 125%;*/
    background-size: cover;
    width: 100%;
    display: flex;
-    position: relative;
+    /*    position: relative;*/
    margin-bottom: 5px;
  }

@@ -216,7 +245,6 @@ watchEffect(() => {
    padding: 2px 10px 2px 2px !important;
    text-align: left;
    text-overflow: ellipsis;
-
    white-space: nowrap;
    overflow: hidden;
  }
@@ -230,4 +258,75 @@ watchEffect(() => {
    text-align: left;
  }
 }
+</style>
+
+
+<style>
+.film-card {
+
+  background-color: transparent;
+  width: 100%;
+  perspective: 1000px;
+  font-family: sans-serif;
+}
+
+
+.film-card-inner {
+
+  padding-top: 125%;
+  position: relative;
+  width: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.film-card:hover .film-card-inner {
+  transform: rotateY(180deg);
+}
+
+.film-card-front, .film-card-back {
+  border-radius: 5px;
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: linear-gradient(#fff2, transparent);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
+}
+.film-card-back {
+  transform: rotateY(180deg);
+
+}
+
+
+
+.card-title, .card-actor {
+  margin: 0 auto;
+  font-size: 14px ;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card-blurb {
+  margin-bottom: 30px;
+  display: -webkit-box;
+  -webkit-line-clamp: 5; /* 限制显示的行数 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 12px;
+}
+
+.card-detail {
+  position: absolute;
+  width: 60%;
+  left: 20%;
+  bottom: 5px;
+}
 </style>
--- a/client/src/views/index/Home.vue
+++ b/client/src/views/index/Home.vue
@@ -34,8 +34,8 @@
          </el-col>
          <el-col :span="12">
            <ul class="nav_ul">
-              <template v-for="c in item.nav.children">
-                <li class="nav_category hidden-md-and-down" v-if="c.show"><a
+              <template v-for="(c,i) in item.nav.children">
+                <li class="nav_category hidden-md-and-down" v-if="c.show && i < 6"><a
                    :href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
              </template>
              <li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
@@ -80,37 +80,7 @@ const data = reactive({
 })
 const router = useRouter()

-// 轮播数据拟态
-let banners = [
-  {
-    name: '樱花庄的宠物女孩',
-    year: 2012,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-43/06e79232a4650aea00f7476356a49847.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/Wt1QDhabdEI7HcL.jpg'
-  },
-  {
-    name: '从零开始的异世界生活',
-    year: 2016,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-29/82e3aec3f43103fa1b7e5a0e7f7c3806.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/UkpdhIRO12fsy6C.jpg'
-  },
-  {
-    name: '五等分的新娘',
-    year: 2020,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-38/dfff403cfd9a5b7d6eed8b4f1b3dedb1.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/wXJr59Zuv4tcKNp.jpg'
-  },
-  {
-    name: '我的青春恋爱物语果然有问题',
-    year: 2018,
-    cName: '动漫',
-    poster: 'https://img.bfzypic.com/upload/vod/20230424-37/e5c9ec121c2cba230243c333447e818a.jpg',
-    picture: 'https://s2.loli.net/2024/02/21/oMAGzSliK2YbhRu.jpg'
-  },
-]
+

 // pc 背景图同步响应
 const carousel = (index: number) => {
--- a/server/config/DataConfig.go
+++ b/server/config/DataConfig.go
@@ -71,6 +71,9 @@ const (
 	DefaultUpdateSpec = "0 */20 * * * ?"
 	// DefaultUpdateTime 每次采集最近 3 小时内更新的影片
 	DefaultUpdateTime = 3
+
+	// FailureCollectKey 失败采集记录key
+	FailureCollectKey = "CollectRecord:Fail:%d"
 )

 // -------------------------Web API相关redis key-----------------------------------
--- a/server/go.sum
+++ b/server/go.sum
@@ -46,8 +46,7 @@ github.com/go-sql-driver/mysql v1.7.0 h1:ueSltNNllEqE3qcWBTD0iQd3IpL/6U+mJxLkazJ
 github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
 github.com/gobwas/glob v0.2.3 h1:A4xDbljILXROh+kObIiy5kIaPYD8e96x1tgBhUI5J+Y=
 github.com/gobwas/glob v0.2.3/go.mod h1:d3Ez4x06l9bZtSvzIay5+Yzi0fmZzPgnTbPcKjJAkT8=
-github.com/goccy/go-json v0.10.0 h1:mXKd9Qw4NuzShiRlOXKews24ufknHO7gx30lsDyokKA=
-github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
 github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
 github.com/gocolly/colly v1.2.0/go.mod h1:Hof5T3ZswNVsOHYmba1u03W65HDWgpV5HifSuueE0EA=
 github.com/gocolly/colly/v2 v2.1.0 h1:k0DuZkDoCsx51bKpRJNEmcxcp+W5N8ziuwGaSDuFoGs=
@@ -205,8 +204,6 @@ gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gorm.io/driver/mysql v1.4.7 h1:rY46lkCspzGHn7+IYsNpSfEv9tA+SU4SkkB+GFX125Y=
 gorm.io/driver/mysql v1.4.7/go.mod h1:SxzItlnT1cb6e1e4ZRpgJN2VYtcqJgqnHxWr4wsP8oc=
 gorm.io/gorm v1.23.8/go.mod h1:l2lP/RyAtc1ynaTjFksBde/O8v9oOGIApu2/xRitmZk=
-gorm.io/gorm v1.24.6 h1:wy98aq9oFEetsc4CAbKD2SoBCdMzsbSIvSUUFJuHi5s=
-gorm.io/gorm v1.24.6/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
 gorm.io/gorm v1.25.5 h1:zR9lOiiYf09VNh5Q1gphfyia1JpiClIWG9hQaxB/mls=
 gorm.io/gorm v1.25.5/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
 honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
--- a/server/model/system/CollectSource.go
+++ b/server/model/system/CollectSource.go
@@ -9,6 +9,7 @@ import (
 	"server/config"
 	"server/plugin/common/util"
 	"server/plugin/db"
+	"time"
 )

 /*
@@ -73,9 +74,12 @@ type FilmSource struct {

 // FailureCollect 失败采集记录信息机构体
 type FailureCollect struct {
-	Id         string `json:"id"`         // 采集站唯一ID
-	Time       int    `json:"time"`       // 采集时长
-	PageNumber int64  `json:"pageNumber"` // 页码
+	Id          string       `json:"id"`          // 采集站唯一ID
+	CollectType ResourceType `json:"collectType"` // 采集类型
+	PageNumber  int64        `json:"pageNumber"`  // 页码
+	//Hour        int64        `json:"hour"`        // 采集参数 h 时长
+	Cause string `json:"cause"` // 失败原因
+	Time  int    `json:"time"`  // 采集失败时的时间
 }

 // SaveCollectSourceList 保存采集站Api列表
@@ -182,3 +186,22 @@ func ExistCollectSourceList() bool {
 	return true

 }
+
+// CollectFailRecord 记录采集失败的相关参数信息
+func CollectFailRecord(fc FailureCollect) error {
+	// 将fc序列化为json格式进行存储
+	m, _ := json.Marshal(fc)
+	// 获取当前的时间戳作为set集合的Score
+	z := redis.Z{Score: float64(time.Now().Unix()), Member: m}
+	return db.Rdb.ZAdd(db.Cxt, config.FailureCollectKey, z).Err()
+}
+
+// GetCollectFailList 从失败采集记录中读取一部分记录
+func GetCollectFailList() []FailureCollect {
+	// 获取多条记录, 降低读取频率 or 多次单条读取
+
+	// 一次获取多条记录, 再次执行失败则重新进行记录
+
+	// 读取单条记录, 成功执行则进行记录清除, 否则对其进行保留
+	return nil
+}