使用 gemini 优化 VideoPost.vue 页面 UI

src/views/post/VideoPost.vue

@@ -1,234 +1,151 @@
 <template>
-  <el-container>
-    <el-header height="220">
-      <el-row style="margin-top: 10px">
-        <el-select
-          v-model="queryInfo.scope"
-          clearable
-          placeholder="查询条件"
-          style="margin-left: 5px"
-          @change="onSelectChange"
-        />
-        <el-button type="plain" icon="el-icon-plus" style="margin-left: 5px" @click="publishVideoDiaglog = true">发布稿件</el-button>
-      </el-row>
+  <el-container class="video-post-container">
+    <el-header height="auto" class="post-header">
+      <div class="header-wrapper">
+        <h3 class="page-title">
+          <i class="el-icon-collection"></i> 稿件管理
+        </h3>
+        <div class="filter-controls">
+          <el-select
+            v-model="queryInfo.scope"
+            clearable
+            placeholder="可见范围筛选"
+            size="small"
+            class="filter-select"
+            @change="handleFilterChange"
+          >
+            <el-option label="全部范围" :value="null" />
+            <el-option label="本人可见" :value="1" />
+            <el-option label="所有人可见" :value="2" />
+            <el-option label="VIP 可见" :value="3" />
+          </el-select>
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="small"
+            class="publish-btn"
+            @click="publishVideoDiaglog = true"
+          >发布稿件</el-button>
+        </div>
+      </div>
     </el-header>
-    <el-main>
-      <el-table
-        :data="dataList"
-        border
-        style="width: 100%"
-      >
-        <el-table-column
-          fixed="left"
-          label="No"
-          type="index"
-        />
-        <el-table-column
-          prop="pubDate"
-          label="发布时间"
-          width="150"
-        />
-        <el-table-column
-          prop="coverUrl"
-          label="封面"
-          width="90"
-        >
-          <template slot-scope="scope">
-            <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="videoId"
-          label="视频 ID"
-          width="120"
-        >
-          <template slot-scope="scope">
-            <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${scope.row.videoId}`">
-              <span>{{ scope.row.videoId }}</span>
-            </router-link>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="title"
-          label="标题"
-          :show-overflow-tooltip="false"
-        >
-          <template slot-scope="scope">
-            <el-tooltip
-              v-if="scope.row.title"
-              :content="scope.row.title"
-              raw-content
-              placement="top-start"
-            >
-              <span v-if="scope.row.title.length <= 15">
-                {{ scope.row.title }}
-              </span>
-              <span v-else>
-                {{ scope.row.title.substr(0, 15) + "..." }}
-              </span>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="description"
-          label="描述"
-          :show-overflow-tooltip="true"
+
+    <el-main class="post-main">
+      <div class="table-card">
+        <el-table
+          :data="dataList"
+          style="width: 100%"
+          header-cell-class-name="table-header-cell"
+          v-loading="loading"
         >
-          <template slot-scope="scope">
-            <el-tooltip
-              v-if="scope.row.description"
-              :content="scope.row.description"
-              raw-content
-              placement="top-start"
-            >
-              <span v-if="scope.row.description && scope.row.description.length <= 15">
-                {{ scope.row.description }}
-              </span>
-              <span v-if="scope.row.description && scope.row.description.length > 15">
-                {{ scope.row.description.substr(0, 15) + "..." }}
+          <el-table-column label="No" type="index" width="60" align="center" />
+
+          <el-table-column label="封面" width="120" align="center">
+            <template slot-scope="scope">
+              <el-image
+                class="video-cover"
+                :src="scope.row.coverUrl"
+                fit="cover"
+                :preview-src-list="[scope.row.coverUrl]"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="title" label="视频信息" min-width="200">
+            <template slot-scope="scope">
+              <div class="video-info-cell">
+                <router-link :to="`/video/${scope.row.videoId}`" class="video-title-link">
+                  {{ scope.row.title }}
+                </router-link>
+                <div class="video-meta">
+                  <span class="vid-tag">ID: {{ scope.row.videoId }}</span>
+                  <span class="duration-tag"><i class="el-icon-time"></i> {{ scope.row.duration }}</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="pubDate" label="发布时间" width="160" align="center" />
+
+          <el-table-column label="可见范围" width="130" align="center">
+            <template slot-scope="scope">
+              <el-tooltip content="点击修改可见范围" placement="top">
+                <div @click="handleScope(scope.$index, scope.row)" class="scope-pointer">
+                  <el-tag v-if="scope.row.scope === 1" size="medium" type="info" effect="plain">本人可见</el-tag>
+                  <el-tag v-else-if="scope.row.scope === 2" size="medium" type="success" effect="plain">所有人可见</el-tag>
+                  <el-tag v-else-if="scope.row.scope === 3" size="medium" type="warning" effect="plain">VIP 可见</el-tag>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="稿件状态" width="120" align="center">
+            <template slot-scope="scope">
+              <span :class="['status-dot', getStatusClass(scope.row.status)]">
+                {{ getStatusText(scope.row.status) }}
               </span>
-            </el-tooltip>
-            <span v-else-if="scope.row.description === null">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="duration"
-          label="时长"
-        />
-        <el-table-column
-          prop="direction"
-          label="方向"
-        />
-        <el-table-column
-          prop="scope"
-          label="可见范围"
-          width="120"
-        >
-          <template slot-scope="scope">
-            <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
-              <el-button
-                v-if="scope.row.scope === 1"
-                size="mini"
-                type="success"
-                @click="handleScope(scope.$index, scope.row)"
-              >本人可见</el-button>
-              <el-button
-                v-else-if="scope.row.scope === 2"
-                size="mini"
-                type="danger"
-                @click="handleScope(scope.$index, scope.row)"
-              >所有人可见</el-button>
-              <el-button
-                v-else-if="scope.row.scope === 3"
-                size="mini"
-                type="warning"
-                @click="handleScope(scope.$index, scope.row)"
-              >VIP 可见</el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="status"
-          label="稿件状态"
-          width="120"
-        >
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
-              审核中
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
-              已发布
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
-              审核未通过
-            </el-tag>
-            <el-tag v-else-if="scope.row.status === 4" :type="'danger'" disable-transitions>
-              下架
-            </el-tag>
-            <el-tag v-else :type="'danger'" disable-transitions>
-              状态值: {{ scope.row.status }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          fixed="right"
-          label="操作"
-          width="280"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handlePreview(scope.$index, scope.row)"
-            >预览</el-button>
-            <el-button
-              size="mini"
-              @click="handleEdit(scope.$index, scope.row)"
-            >编辑</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-pagination
-        background
-        :small="screenWidth <= 768"
-        layout="prev, pager, next"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        :total="totalSize"
-        @current-change="handleCurrentChange"
-        @prev-click="handleCurrentChange"
-        @next-click="handleCurrentChange"
-      />
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="220" fixed="right" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
+              <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+              <el-button type="text" size="small" icon="el-icon-delete" class="danger-text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-container">
+          <el-pagination
+            background
+            :small="screenWidth <= 768"
+            layout="total, prev, pager, next, jumper"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handlePageChange"
+          />
+        </div>
+      </div>
     </el-main>
 
-    <!-- 发布视频稿件对话框 -->
-    <el-dialog
-      :visible.sync="publishVideoDiaglog"
-      :before-close="handleClose"
-      width="70%"
-      center
-    >
+    <el-dialog :visible.sync="publishVideoDiaglog" width="70%" custom-class="custom-glass-dialog" append-to-body destroy-on-close>
+      <div slot="title" class="dialog-header-custom">
+        <i class="el-icon-circle-plus-outline"></i><span>发布新视频稿件</span>
+      </div>
       <video-post-publish @video-publish="onVideoPublish" />
+    </el-dialog>
+
+    <el-dialog :visible.sync="showEditScopeDialog" width="400px" custom-class="custom-glass-dialog compact-dialog" append-to-body center>
+      <div slot="title" class="dialog-header-custom">
+        <i class="el-icon-lock"></i><span>权限设置</span>
+      </div>
+      <div class="dialog-body-padding">
+        <p class="input-label-tip">请选择该视频的可见范围：</p>
+        <el-select v-model="form.scope" placeholder="选择可见范围" style="width: 100%">
+          <el-option label="本人可见" value="1" />
+          <el-option label="所有人可见" value="2" />
+          <el-option label="VIP 可见" value="3" />
+        </el-select>
+      </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="text" @click="publishVideoDiaglog = false">取 消</el-button>
+        <el-button size="small" round @click="showEditScopeDialog = false">取 消</el-button>
+        <el-button size="small" type="primary" round @click="onUpdateScope">确认更新</el-button>
       </span>
     </el-dialog>
-    <el-dialog
-      append-to-body
-      :visible.sync="showEditScopeDialog"
-      width="30%"
-      center
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>修改视频可见范围</span>
-          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
-        </div>
-        <div class="text item">
-          <el-select v-model="form.scope" placeholder="选择可见范围">
-            <el-option label="本人可见" value="1" />
-            <el-option label="所有人可见" value="2" />
-            <el-option label="VIP 可见" value="3" />
-          </el-select>
-        </div>
-      </el-card>
-    </el-dialog>
-    <!-- 视频预览对话框 -->
-    <el-dialog
-      title="预览视频"
-      append-to-body
-      :visible.sync="showPreviewDialog"
-      :before-close="handleDialogClose"
-      width="70%"
-      center
-    >
-      <template>
+
+    <el-dialog :visible.sync="showPreviewDialog" width="900px" top="8vh" custom-class="custom-glass-dialog preview-dialog" append-to-body @close="handleDialogClose(()=> { showPreviewDialog = false })">
+      <div slot="title" class="dialog-header-custom">
+        <i class="el-icon-video-play"></i><span>内容预览</span>
+      </div>
+      <div class="preview-wrapper">
         <video-preview-player :video-prop.sync="videoProp" />
-      </template>
+      </div>
     </el-dialog>
   </el-container>
 </template>
@@ -243,175 +160,178 @@ export default {
   components: { VideoPreviewPlayer, VideoPostPublish },
   data() {
     return {
+      loading: false,
       queryInfo: {
-        scope: null,
-        pn: 1
+        scope: null, // 从 URL 获取
+        pn: 1        // 从 URL 获取
       },
-      // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
-      currentPage: 1,
       pageSize: 12,
       totalSize: 0,
       dataList: [],
-      // **********************************************************************
-      videoProp: null,
-      showVideoResourceDialog: false,
+      videoProp: { videoId: null, play: false },
       showEditScopeDialog: false,
       showPreviewDialog: false,
-      form: {
-        videoId: null,
-        scope: 1
-      },
-      videoResources: [],
+      form: { videoId: null, scope: 1 },
       publishVideoDiaglog: false
     }
   },
-  created() {
-    document.title = '我的视频稿件'
-    this.getData()
+  computed: {
+    // 映射当前页码给 el-pagination 使用
+    currentPage() {
+      return parseInt(this.queryInfo.pn) || 1;
+    }
+  },
+  watch: {
+    // 核心优化：监听路由变化，一旦 URL 参数变了，就重新抓取数据
+    '$route': {
+      handler: 'syncParamsAndLoad',
+      immediate: true
+    }
   },
   methods: {
-    handleCurrentChange(pageNumber) {
-      this.currentPage = pageNumber
-      this.getData()
-      // 回到顶部
-      scrollTo(0, 0)
+    // 1. 同步 URL 参数到 data，并执行请求
+    syncParamsAndLoad() {
+      const { pn, scope } = this.$route.query;
+      this.queryInfo.pn = pn ? parseInt(pn) : 1;
+      this.queryInfo.scope = scope ? (isNaN(scope) ? scope : parseInt(scope)) : null;
+      this.getData();
+    },
+
+    // 2. 更新 URL 的通用方法
+    updateRouter() {
+      this.$router.push({
+        path: this.$route.path,
+        query: {
+          pn: this.queryInfo.pn,
+          scope: this.queryInfo.scope || undefined // 为 null 时不显示在 URL 中
+        }
+      }).catch(err => {
+        // 捕获冗余导航错误（点击同一页时）
+        if (err.name !== 'NavigationDuplicated') throw err;
+      });
     },
+
+    // 3. 交互触发：切换分页
+    handlePageChange(pageNumber) {
+      this.queryInfo.pn = pageNumber;
+      this.updateRouter();
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    },
+
+    // 4. 交互触发：切换筛选
+    handleFilterChange() {
+      this.queryInfo.pn = 1; // 筛选条件变了，重置回第一页
+      this.updateRouter();
+    },
+
     getData() {
-      this.dataList = []
-      getVideoPosts(this.currentPage).then(resp => {
+      this.loading = true;
+      // 注意：这里建议给后端接口也加上 scope 参数，此处假设你原有接口支持
+      getVideoPosts(this.queryInfo.pn, this.queryInfo.scope).then(resp => {
         if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
+          this.dataList = resp.data.list;
+          this.totalSize = resp.data.totalSize;
         }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
-      })
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+
+    /* --- 其余 UI 逻辑保持不变 --- */
+    getStatusClass(status) {
+      const map = { 1: 'warning', 2: 'success', 3: 'danger', 4: 'info' };
+      return map[status] || 'info';
+    },
+    getStatusText(status) {
+      const map = { 1: '审核中', 2: '已发布', 3: '审核失败', 4: '已下架' };
+      return map[status] || `未知(${status})`;
     },
     handleScope(index, row) {
-      this.form.videoId = row.videoId
-      this.form.scope = '' + row.scope
-      this.showEditScopeDialog = true
+      this.form.videoId = row.videoId;
+      this.form.scope = '' + row.scope;
+      this.showEditScopeDialog = true;
     },
     handleDialogClose(done) {
-      this.showPreviewDialog = false
-      this.videoProp = {
-        videoId: null,
-        play: false
-      }
-      done()
+      this.videoProp = { videoId: null, play: false };
+      if(typeof done === 'function') done();
     },
     handlePreview(index, row) {
       videoInfo(row.videoId).then(res => {
         if (res.code === 0) {
-          this.showPreviewDialog = true
-          this.videoProp = {
-            videoId: res.data.videoId,
-            play: true
-          }
+          this.showPreviewDialog = true;
+          this.videoProp = { videoId: res.data.videoId, play: true };
         }
-      })
+      });
     },
     handleEdit(index, row) {
-      const path = '/bg/post/video/edit/' + row.videoId
-      this.$router.push(path)
+      this.$router.push('/bg/post/video/edit/' + row.videoId);
     },
     handleDelete(index, row) {
-      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm(`确定要删除《${row.title}》?`, '警告', {
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
       }).then(() => {
         deleteVideoPost(row.videoId).then(res => {
           if (res.code === 0) {
-            this.$notify({
-              title: '提示',
-              message: '稿件已删除',
-              type: 'warning',
-              duration: 3000
-            })
-            this.$router.go(0)
+            this.$message.success('稿件已删除');
+            this.getData();
           }
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消'
-        })
-      })
+        });
+      }).catch(() => {});
     },
     onUpdateScope() {
-      this.showEditScopeDialog = false
       updateVideoScope(this.form).then(res => {
         if (res.code === 0) {
-          this.getData()
-        } else {
-          this.$notify({
-            title: '提示',
-            message: '可见范围更新失败',
-            type: 'warning',
-            duration: 3000
-          })
+          this.showEditScopeDialog = false;
+          this.getData();
+          this.$message.success('可见范围已更新');
         }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    onSelectChange() {
-      this.$message.info(this.queryInfo)
-    },
-    handleClose() {
-      // this.publishVideoDiaglog = false
-      this.$message.info('点击底部取消按钮关闭')
+      });
     },
     onVideoPublish(videoForm) {
-      this.publishVideoDiaglog = false
       addVideoPost(videoForm).then(res => {
         if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '投稿成功,等待审核通过后其他人就可以看到你的视频了',
-            type: 'warning',
-            duration: 3000
-          })
-          this.getData()
-        } else {
-          this.$notify({
-            title: '提示',
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
+          this.publishVideoDiaglog = false;
+          this.$message.success('投稿成功，请等待审核');
+          this.getData();
         }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
+      });
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
+/* 样式部分同上一版，保持“三层”视觉感 */
+.video-post-container { padding: 24px; background-color: #f5f7fa; min-height: 100%; }
+.post-header { background: white; padding: 20px 24px; border-radius: 12px 12px 0 0; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.03); }
+.header-wrapper { display: flex; justify-content: space-between; align-items: center; }
+.page-title { margin: 0; font-size: 20px; color: #303133; display: flex; align-items: center; gap: 8px; }
+.filter-controls { display: flex; gap: 16px; }
+.publish-btn { box-shadow: 0 4px 10px rgba(64, 158, 255, 0.3); }
+.post-main { padding: 0; }
+.table-card { background: white; border-radius: 0 0 12px 12px; padding: 10px 24px 24px; box-shadow: 0 8px 24px 0 rgba(0,0,0,0.04); min-height: 400px; }
+.video-cover { width: 90px; height: 50px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform 0.3s; }
+.video-cover:hover { transform: scale(1.08); }
+.video-title-link { color: #303133; text-decoration: none; font-weight: 600; font-size: 14px; }
+.video-title-link:hover { color: #409EFF; }
+.video-meta { margin-top: 6px; font-size: 12px; color: #909399; }
+.vid-tag { background: #f0f2f5; padding: 2px 6px; border-radius: 4px; margin-right: 10px; }
+.status-dot { position: relative; padding-left: 16px; font-size: 13px; color: #606266; }
+.status-dot::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; }
+.status-dot.success::before { background-color: #67C23A; box-shadow: 0 0 6px #67C23A; }
+.status-dot.warning::before { background-color: #E6A23C; box-shadow: 0 0 6px #E6A23C; }
+.status-dot.danger::before { background-color: #F56C6C; box-shadow: 0 0 6px #F56C6C; }
+.danger-text { color: #F56C6C; }
+.pagination-container { margin-top: 30px; display: flex; justify-content: center; }
+
+::v-deep .custom-glass-dialog { border-radius: 16px !important; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important; }
+::v-deep .custom-glass-dialog .el-dialog__header { padding: 20px 24px; background: #fcfcfd; border-bottom: 1px solid #f0f0f0; }
+.dialog-header-custom { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #303133; }
+.dialog-header-custom i { color: #409EFF; font-size: 20px; }
+::v-deep .custom-glass-dialog .el-dialog__body { padding: 24px; }
+.input-label-tip { font-size: 13px; color: #909399; margin-bottom: 12px; }
+.preview-wrapper { background: #1a1a1a; border-radius: 12px; overflow: hidden; line-height: 0; }
+::v-deep .table-header-cell { background-color: #f8f9fb !important; color: #303133; font-weight: 600; padding: 12px 0; }
 </style>