样式调整
This commit is contained in:
jianzhichu
@@ -5,7 +5,7 @@ https://go.microsoft.com/fwlink/?LinkID=208121.
|
||||
<Project>
|
||||
<PropertyGroup>
|
||||
<_PublishTargetUrl>E:\code\dysync\bin\Release\net6.0\publish\</_PublishTargetUrl>
|
||||
<History>True|2025-12-02T04:58:22.0951548Z||;True|2025-12-02T09:30:33.7066474+08:00||;True|2025-12-02T09:30:14.5481844+08:00||;True|2025-12-02T09:30:00.3123364+08:00||;False|2025-12-02T09:29:54.4615520+08:00||;True|2025-12-02T09:13:01.7995414+08:00||;False|2025-12-02T09:12:55.8360281+08:00||;True|2025-12-02T09:12:31.0156791+08:00||;True|2025-12-02T08:55:11.3773395+08:00||;True|2025-12-02T08:53:21.3927713+08:00||;False|2025-12-02T08:48:55.8638037+08:00||;True|2025-12-02T07:29:25.2192447+08:00||;False|2025-12-02T07:29:10.2504665+08:00||;True|2025-12-02T07:28:29.0769286+08:00||;True|2025-12-01T21:53:07.6474834+08:00||;True|2025-12-01T21:44:28.1674315+08:00||;True|2025-12-01T21:18:47.2119609+08:00||;True|2025-12-01T20:51:19.9948301+08:00||;True|2025-12-01T20:50:36.9904697+08:00||;True|2025-12-01T20:44:10.1695142+08:00||;True|2025-12-01T19:27:58.0479456+08:00||;True|2025-12-01T19:16:02.2288214+08:00||;False|2025-12-01T19:15:56.0372115+08:00||;True|2025-12-01T19:15:16.4854821+08:00||;False|2025-12-01T19:15:06.7001019+08:00||;True|2025-12-01T17:10:38.9739466+08:00||;False|2025-12-01T17:10:18.8928139+08:00||;True|2025-12-01T17:03:59.3171589+08:00||;True|2025-12-01T17:03:12.5681656+08:00||;True|2025-12-01T16:42:51.4415025+08:00||;True|2025-12-01T01:29:59.6975567+08:00||;True|2025-12-01T01:29:45.1898652+08:00||;False|2025-12-01T01:29:33.1787721+08:00||;True|2025-12-01T01:27:33.1297605+08:00||;True|2025-12-01T01:27:27.3976862+08:00||;False|2025-12-01T01:27:20.5193052+08:00||;True|2025-12-01T01:11:11.0210582+08:00||;True|2025-12-01T01:04:04.3307782+08:00||;True|2025-12-01T00:55:49.8018864+08:00||;True|2025-12-01T00:27:25.1323561+08:00||;True|2025-11-30T23:58:20.7284116+08:00||;True|2025-11-30T23:57:58.3027622+08:00||;True|2025-11-30T23:57:43.0829614+08:00||;False|2025-11-30T23:57:33.5606716+08:00||;True|2025-11-30T23:54:29.6203368+08:00||;True|2025-11-30T23:54:27.5383120+08:00||;False|2025-11-30T23:54:17.0823982+08:00||;True|2025-11-30T22:41:11.4538820+08:00||;True|2025-11-30T22:38:19.7064566+08:00||;True|2025-11-30T22:37:35.2889186+08:00||;True|2025-11-30T21:42:31.1408314+08:00||;True|2025-11-30T21:42:19.5385333+08:00||;False|2025-11-30T21:42:13.3290237+08:00||;True|2025-11-30T21:33:28.0806806+08:00||;True|2025-11-30T21:16:56.7088027+08:00||;False|2025-11-30T21:16:46.1444944+08:00||;True|2025-11-30T20:21:24.4059664+08:00||;False|2025-11-30T20:21:17.6006098+08:00||;True|2025-11-30T20:20:08.2030141+08:00||;False|2025-11-30T20:16:12.3608968+08:00||;True|2025-11-30T20:15:35.6048313+08:00||;True|2025-11-30T19:45:18.7229552+08:00||;True|2025-11-30T19:45:08.6083368+08:00||;False|2025-11-30T19:44:54.7824905+08:00||;True|2025-11-30T19:44:17.0179491+08:00||;True|2025-11-30T19:44:06.7073484+08:00||;False|2025-11-30T19:43:58.2896556+08:00||;True|2025-11-30T19:42:08.2261927+08:00||;True|2025-11-30T19:28:15.7115077+08:00||;False|2025-11-30T19:28:10.2280725+08:00||;True|2025-11-30T19:23:31.7859158+08:00||;True|2025-11-30T19:23:20.7788277+08:00||;True|2025-11-30T19:17:11.8583296+08:00||;False|2025-11-30T19:10:41.8369574+08:00||;True|2025-11-30T19:02:08.8184758+08:00||;False|2025-11-30T19:01:59.4711045+08:00||;True|2025-11-30T18:16:01.8372242+08:00||;True|2025-11-30T14:50:31.9356543+08:00||;True|2025-11-30T14:48:27.1833064+08:00||;True|2025-11-30T02:06:06.6099669+08:00||;True|2025-11-30T01:49:46.4358206+08:00||;False|2025-11-30T01:49:34.4884036+08:00||;True|2025-11-30T01:43:41.1028753+08:00||;True|2025-11-30T01:38:18.2856609+08:00||;True|2025-11-30T01:23:02.4378259+08:00||;True|2025-11-30T01:08:29.4041159+08:00||;True|2025-11-30T00:56:33.4172007+08:00||;False|2025-11-30T00:56:21.2777389+08:00||;True|2025-11-27T13:37:08.6884390+08:00||;False|2025-11-27T13:36:54.2595622+08:00||;True|2025-11-27T11:03:33.8401644+08:00||;False|2025-11-27T11:02:48.8942827+08:00||;True|2025-11-26T23:48:02.3957186+08:00||;True|2025-11-26T23:43:06.8154188+08:00||;False|2025-11-26T23:42:05.9191485+08:00||;True|2025-11-26T23:30:11.1295861+08:00||;True|2025-11-26T00:00:42.1507258+08:00||;True|2025-11-26T00:00:17.0107229+08:00||;True|2025-11-25T23:42:07.4349629+08:00||;False|2025-11-25T23:41:56.9328658+08:00||;</History>
|
||||
<History>True|2025-12-02T06:39:58.8932130Z||;True|2025-12-02T14:36:37.1529072+08:00||;True|2025-12-02T12:58:22.0951548+08:00||;True|2025-12-02T09:30:33.7066474+08:00||;True|2025-12-02T09:30:14.5481844+08:00||;True|2025-12-02T09:30:00.3123364+08:00||;False|2025-12-02T09:29:54.4615520+08:00||;True|2025-12-02T09:13:01.7995414+08:00||;False|2025-12-02T09:12:55.8360281+08:00||;True|2025-12-02T09:12:31.0156791+08:00||;True|2025-12-02T08:55:11.3773395+08:00||;True|2025-12-02T08:53:21.3927713+08:00||;False|2025-12-02T08:48:55.8638037+08:00||;True|2025-12-02T07:29:25.2192447+08:00||;False|2025-12-02T07:29:10.2504665+08:00||;True|2025-12-02T07:28:29.0769286+08:00||;True|2025-12-01T21:53:07.6474834+08:00||;True|2025-12-01T21:44:28.1674315+08:00||;True|2025-12-01T21:18:47.2119609+08:00||;True|2025-12-01T20:51:19.9948301+08:00||;True|2025-12-01T20:50:36.9904697+08:00||;True|2025-12-01T20:44:10.1695142+08:00||;True|2025-12-01T19:27:58.0479456+08:00||;True|2025-12-01T19:16:02.2288214+08:00||;False|2025-12-01T19:15:56.0372115+08:00||;True|2025-12-01T19:15:16.4854821+08:00||;False|2025-12-01T19:15:06.7001019+08:00||;True|2025-12-01T17:10:38.9739466+08:00||;False|2025-12-01T17:10:18.8928139+08:00||;True|2025-12-01T17:03:59.3171589+08:00||;True|2025-12-01T17:03:12.5681656+08:00||;True|2025-12-01T16:42:51.4415025+08:00||;True|2025-12-01T01:29:59.6975567+08:00||;True|2025-12-01T01:29:45.1898652+08:00||;False|2025-12-01T01:29:33.1787721+08:00||;True|2025-12-01T01:27:33.1297605+08:00||;True|2025-12-01T01:27:27.3976862+08:00||;False|2025-12-01T01:27:20.5193052+08:00||;True|2025-12-01T01:11:11.0210582+08:00||;True|2025-12-01T01:04:04.3307782+08:00||;True|2025-12-01T00:55:49.8018864+08:00||;True|2025-12-01T00:27:25.1323561+08:00||;True|2025-11-30T23:58:20.7284116+08:00||;True|2025-11-30T23:57:58.3027622+08:00||;True|2025-11-30T23:57:43.0829614+08:00||;False|2025-11-30T23:57:33.5606716+08:00||;True|2025-11-30T23:54:29.6203368+08:00||;True|2025-11-30T23:54:27.5383120+08:00||;False|2025-11-30T23:54:17.0823982+08:00||;True|2025-11-30T22:41:11.4538820+08:00||;True|2025-11-30T22:38:19.7064566+08:00||;True|2025-11-30T22:37:35.2889186+08:00||;True|2025-11-30T21:42:31.1408314+08:00||;True|2025-11-30T21:42:19.5385333+08:00||;False|2025-11-30T21:42:13.3290237+08:00||;True|2025-11-30T21:33:28.0806806+08:00||;True|2025-11-30T21:16:56.7088027+08:00||;False|2025-11-30T21:16:46.1444944+08:00||;True|2025-11-30T20:21:24.4059664+08:00||;False|2025-11-30T20:21:17.6006098+08:00||;True|2025-11-30T20:20:08.2030141+08:00||;False|2025-11-30T20:16:12.3608968+08:00||;True|2025-11-30T20:15:35.6048313+08:00||;True|2025-11-30T19:45:18.7229552+08:00||;True|2025-11-30T19:45:08.6083368+08:00||;False|2025-11-30T19:44:54.7824905+08:00||;True|2025-11-30T19:44:17.0179491+08:00||;True|2025-11-30T19:44:06.7073484+08:00||;False|2025-11-30T19:43:58.2896556+08:00||;True|2025-11-30T19:42:08.2261927+08:00||;True|2025-11-30T19:28:15.7115077+08:00||;False|2025-11-30T19:28:10.2280725+08:00||;True|2025-11-30T19:23:31.7859158+08:00||;True|2025-11-30T19:23:20.7788277+08:00||;True|2025-11-30T19:17:11.8583296+08:00||;False|2025-11-30T19:10:41.8369574+08:00||;True|2025-11-30T19:02:08.8184758+08:00||;False|2025-11-30T19:01:59.4711045+08:00||;True|2025-11-30T18:16:01.8372242+08:00||;True|2025-11-30T14:50:31.9356543+08:00||;True|2025-11-30T14:48:27.1833064+08:00||;True|2025-11-30T02:06:06.6099669+08:00||;True|2025-11-30T01:49:46.4358206+08:00||;False|2025-11-30T01:49:34.4884036+08:00||;True|2025-11-30T01:43:41.1028753+08:00||;True|2025-11-30T01:38:18.2856609+08:00||;True|2025-11-30T01:23:02.4378259+08:00||;True|2025-11-30T01:08:29.4041159+08:00||;True|2025-11-30T00:56:33.4172007+08:00||;False|2025-11-30T00:56:21.2777389+08:00||;True|2025-11-27T13:37:08.6884390+08:00||;False|2025-11-27T13:36:54.2595622+08:00||;True|2025-11-27T11:03:33.8401644+08:00||;False|2025-11-27T11:02:48.8942827+08:00||;True|2025-11-26T23:48:02.3957186+08:00||;True|2025-11-26T23:43:06.8154188+08:00||;False|2025-11-26T23:42:05.9191485+08:00||;True|2025-11-26T23:30:11.1295861+08:00||;True|2025-11-26T00:00:42.1507258+08:00||;True|2025-11-26T00:00:17.0107229+08:00||;</History>
|
||||
<LastFailureDetails />
|
||||
</PropertyGroup>
|
||||
<ItemGroup>
|
||||
|
||||
@@ -1,30 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 优化查询区域：增加容器、响应式布局、合理间距 -->
|
||||
<!-- 优化查询区域：调整布局，时间、博主名称、标题放一行，宽度自适应 -->
|
||||
<div class="query-container">
|
||||
<a-form layout="inline" :model="quaryData" class="query-form">
|
||||
<!-- 第一行：日期选择器组 -->
|
||||
<div class="form-row">
|
||||
<a-form-item label="同步日期" class="form-item">
|
||||
<!-- 第一行：时间选择器组 + 博主名称 + 标题（合并为一行，自适应宽度） -->
|
||||
<div class="form-row form-main-row">
|
||||
<a-form-item label="同步日期" class="form-item form-item-date">
|
||||
<a-range-picker v-model:value="value1" :ranges="ranges" :locale="locale" @change="datePicked" class="range-picker" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="发布日期" class="form-item">
|
||||
<a-form-item label="发布日期" class="form-item form-item-date">
|
||||
<a-range-picker v-model:value="value2" :ranges="ranges2" :locale="locale" @change="datePicked2" class="range-picker" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：输入框组 -->
|
||||
<div class="form-row">
|
||||
<a-form-item label="作者" ref="author" name="author" class="form-item">
|
||||
<a-input v-model:value="quaryData.author" class="query-input" placeholder="请输入作者" />
|
||||
<a-form-item label="博主名称" ref="author" name="author" class="form-item form-item-input">
|
||||
<a-input v-model:value="quaryData.author" class="query-input" placeholder="请输入博主名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="标题" ref="title" name="title" class="form-item">
|
||||
<a-form-item label="标题" ref="title" name="title" class="form-item form-item-input">
|
||||
<a-input v-model:value="quaryData.title" class="query-input" placeholder="请输入标题" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 第三行：单选组 + 按钮组（新增批量操作开关和删除按钮） -->
|
||||
<!-- 第二行：单选组 + 按钮组 -->
|
||||
<div class="form-row form-actions-row">
|
||||
<a-form-item label="视频类型" class="form-item radio-group-item">
|
||||
<a-radio-group v-model:value="quaryData.viedoType" button-style="solid" @change="onViedoTypeChanged" class="video-type-radio">
|
||||
@@ -72,7 +69,6 @@
|
||||
<span class="modal-title-with-tooltip" :title="formatFilePath(currentVideoInfo?.videoSavePath)">
|
||||
{{ playingTitle }}
|
||||
</span>
|
||||
|
||||
</template>
|
||||
<div class="video-container">
|
||||
<div v-if="isVideoLoading" class="loading-overlay">
|
||||
@@ -89,7 +85,6 @@
|
||||
</div>
|
||||
<div v-if="currentVideoInfo" class="video-info-bar">
|
||||
<div class="info-container">
|
||||
|
||||
<div class="info-item">
|
||||
<span class="info-label">同步时间：</span>
|
||||
<span class="info-value">{{ currentVideoInfo.syncTimeStr || '未知' }}</span>
|
||||
@@ -108,7 +103,6 @@
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
@@ -146,6 +140,8 @@ import dayjs, { Dayjs } from 'dayjs';
|
||||
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import CryptoJS from 'crypto-js';
|
||||
import { SearchOutlined, SyncOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
// 类型定义
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
interface DataItem {
|
||||
@@ -159,6 +155,7 @@ interface DataItem {
|
||||
fileHash?: string;
|
||||
authorId?: string;
|
||||
videoSavePath: string;
|
||||
createTimeStr?: string; // 发布时间
|
||||
}
|
||||
|
||||
interface QuaryParam {
|
||||
@@ -228,7 +225,7 @@ const columns = ref([
|
||||
title: '同步类型',
|
||||
dataIndex: 'viedoTypeStr',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '博主',
|
||||
@@ -342,7 +339,7 @@ const formatFilePath = (filePath?: string) => {
|
||||
|
||||
// -------------------------- 核心工具方法 --------------------------
|
||||
|
||||
const formatPathSeparator = (path) => {
|
||||
const formatPathSeparator = (path: string | undefined) => {
|
||||
if (!path) return path; // 处理空路径情况
|
||||
// 正则表达式 /\\/g 表示全局匹配所有反斜杠
|
||||
return path.replace(/\\/g, '/');
|
||||
@@ -382,7 +379,7 @@ const GetRecords = () => {
|
||||
quaryData.dates = value1.value.map((date) => date.format('YYYY-MM-DD'));
|
||||
}
|
||||
if (value2.value) {
|
||||
quaryData.dates2 = value1.value.map((date) => date.format('YYYY-MM-DD'));
|
||||
quaryData.dates2 = value2.value.map((date) => date.format('YYYY-MM-DD')); // 修复：之前误写为value1
|
||||
}
|
||||
useApiStore()
|
||||
.VideoPageList(quaryData)
|
||||
@@ -694,7 +691,7 @@ const handleBatchShare = () => {
|
||||
};
|
||||
|
||||
// 复制链接到剪贴板（兼容生产环境）
|
||||
const copyToClipboard = async (shareUrl, msg) => {
|
||||
const copyToClipboard = async (shareUrl: string, msg: string) => {
|
||||
try {
|
||||
// 方案1：优先使用 navigator.clipboard（现代浏览器+HTTPS环境）
|
||||
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
|
||||
@@ -814,9 +811,42 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 核心修改：主查询行自适应布局 */
|
||||
.form-main-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap; /* 禁止换行 */
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
overflow: hidden; /* 防止溢出 */
|
||||
}
|
||||
|
||||
/* 日期选择器项：固定基础宽度，自适应收缩 */
|
||||
.form-item-date {
|
||||
flex: 0 1 280px; /* 不放大，可缩小，基础宽度280px */
|
||||
min-width: 220px; /* 最小宽度，防止过度收缩 */
|
||||
}
|
||||
|
||||
/* 输入框项：自适应拉伸填充剩余空间 */
|
||||
.form-item-input {
|
||||
flex: 1 1 auto; /* 可放大，可缩小，自动宽度 */
|
||||
min-width: 180px; /* 最小宽度，保证可用性 */
|
||||
}
|
||||
|
||||
/* 日期选择器自适应宽度 */
|
||||
.range-picker {
|
||||
width: 100% !important; /* 占满父容器宽度 */
|
||||
min-width: 200px !important;
|
||||
}
|
||||
|
||||
/* 输入框自适应宽度 */
|
||||
.query-input {
|
||||
width: 100% !important; /* 占满父容器宽度 */
|
||||
min-width: 160px !important;
|
||||
}
|
||||
|
||||
/* 新增：批量操作开关样式 */
|
||||
.batch-operation-item {
|
||||
margin-left: 20 !important;
|
||||
margin-left: 20px !important;
|
||||
/* margin-right: 16px !important; */
|
||||
}
|
||||
|
||||
@@ -830,16 +860,6 @@ onMounted(() => {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* 日期选择器样式 */
|
||||
.range-picker {
|
||||
width: 320px !important;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.query-input {
|
||||
width: 250px !important;
|
||||
}
|
||||
|
||||
/* 单选组样式 */
|
||||
.video-type-radio {
|
||||
display: flex;
|
||||
@@ -868,13 +888,14 @@ onMounted(() => {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
/* 响应式调整：屏幕较小时允许主查询行换行 */
|
||||
@media (max-width: 1440px) {
|
||||
.range-picker {
|
||||
width: 280px !important;
|
||||
.form-main-row {
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
}
|
||||
.query-input {
|
||||
width: 140px !important;
|
||||
.form-item-date,
|
||||
.form-item-input {
|
||||
margin-bottom: 12px !important; /* 换行后添加底部间距 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -884,7 +905,7 @@ onMounted(() => {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.batch-operation-item {
|
||||
margin-left: 20 !important;
|
||||
margin-left: 20px !important;
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
.button-group-item {
|
||||
@@ -897,33 +918,16 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.range-picker {
|
||||
width: 240px !important;
|
||||
}
|
||||
.query-input {
|
||||
width: 100px !important;
|
||||
}
|
||||
.form-item {
|
||||
margin-right: 16px !important;
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
.form-item {
|
||||
width: 100% !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.range-picker,
|
||||
.query-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
.video-type-radio {
|
||||
width: 100%;
|
||||
.form-item-date,
|
||||
.form-item-input {
|
||||
flex: 1 1 100%; /* 占满整行 */
|
||||
min-width: unset;
|
||||
}
|
||||
.button-group {
|
||||
width: 100%;
|
||||
@@ -945,17 +949,6 @@ onMounted(() => {
|
||||
max-height: 420px;
|
||||
}
|
||||
|
||||
.video-element {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 420px;
|
||||
min-height: 250px;
|
||||
background-color: #000;
|
||||
object-fit: contain;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Reference in New Issue
Block a user