兼容原阿里云镜像，新push了一个最新的容器到
registry.cn-hangzhou.aliyuncs.com/jianzhichu/dysync.net:latest 登录页面增加提示更新信息
This commit is contained in:
jianzhichu
@@ -1,48 +1,59 @@
|
||||
<script lang="ts" setup>
|
||||
// 步骤2：声明父组件传递的 showSetting 事件（关键！）
|
||||
const emits = defineEmits(['showSetting']);
|
||||
import { ref, h, VNode, onMounted } from 'vue';
|
||||
import { ref, onMounted } from 'vue'; // 移除 h、VNode 导入
|
||||
import { StepinHeaderAction } from 'stepin';
|
||||
import DayNightSwitch from '@/components/switch/DayNightSwitch.vue';
|
||||
import { TagsOutlined, CopyOutlined } from '@ant-design/icons-vue'; // 移除不需要的图标
|
||||
import { TagsOutlined, CopyOutlined, GithubOutlined } from '@ant-design/icons-vue';
|
||||
import Fullscreen from '../fullscreen/Fullscreen.vue';
|
||||
import { useApiStore } from '@/store';
|
||||
import { notification, message } from 'ant-design-vue';
|
||||
import { message, Popover } from 'ant-design-vue'; // 移除 notification
|
||||
|
||||
// 版本数据和当前版本状态
|
||||
const dyVersions = ref<string[]>([]);
|
||||
const copyLoading = ref<Record<string, boolean>>({}); // 复制按钮加载状态
|
||||
const notificationKey = ref<string>('version-notification');
|
||||
const copyLoading = ref<Record<string, boolean>>({});
|
||||
// 版本 popover 显隐控制
|
||||
const versionPopoverVisible = ref<boolean>(false);
|
||||
|
||||
// 复制版本号方法（优化：去除“（当前版本）”标记，只复制纯版本号）
|
||||
// 复制版本号方法（优化：兼容所有浏览器，修复 navigator.clipboard 不存在的问题）
|
||||
// 仓库地址常量
|
||||
const gitRepos = ref([
|
||||
{
|
||||
name: 'Gitee',
|
||||
url: 'https://gitee.com/deathvicky/dysync.net',
|
||||
color: '#FF6600',
|
||||
},
|
||||
{
|
||||
name: 'GitHub',
|
||||
url: 'https://github.com/jianzhichu/dysync.net',
|
||||
color: '#6c35de',
|
||||
},
|
||||
]);
|
||||
const gitCopyLoading = ref<Record<string, boolean>>({});
|
||||
const popoverVisible = ref<boolean>(false);
|
||||
|
||||
// 复制版本号方法（保留原有兼容逻辑，无改动）
|
||||
const copyVersion = (version: string) => {
|
||||
const pureVersion = version.replace('（当前版本）', '').replace('（最新版）', '').trim(); // 过滤所有标记
|
||||
const pureVersion = version.replace('（当前版本）', '').replace('（最新版）', '').trim();
|
||||
copyLoading.value[version] = true;
|
||||
|
||||
// 兼容方案：优先使用现代 API，降级使用传统方法
|
||||
const doCopy = async () => {
|
||||
try {
|
||||
// 方案1：现代浏览器 + HTTPS 环境（优先）
|
||||
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
|
||||
await navigator.clipboard.writeText(pureVersion);
|
||||
message.success(`已复制版本: ${pureVersion}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 方案2：降级使用 document.execCommand（兼容 HTTP/旧浏览器）
|
||||
const textarea = document.createElement('textarea');
|
||||
// 隐藏文本域（避免影响页面）
|
||||
textarea.style.position = 'absolute';
|
||||
textarea.style.top = '-9999px';
|
||||
textarea.style.left = '-9999px';
|
||||
textarea.value = pureVersion;
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
// 选中并复制
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea); // 清理 DOM
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
if (success) {
|
||||
message.success(`已复制版本: ${pureVersion}`);
|
||||
@@ -50,7 +61,6 @@ const copyVersion = (version: string) => {
|
||||
throw new Error('execCommand 复制失败');
|
||||
}
|
||||
} catch (error) {
|
||||
// 方案3：最终降级 - 提示手动复制
|
||||
message.warning(`复制失败，请手动复制：${pureVersion}`);
|
||||
console.warn('复制版本号失败：', error);
|
||||
} finally {
|
||||
@@ -61,162 +71,54 @@ const copyVersion = (version: string) => {
|
||||
doCopy();
|
||||
};
|
||||
|
||||
// 定义版本列表组件（移除所有额外当前版本标记）
|
||||
// 定义版本列表组件（完整版本：保留所有原有逻辑+样式优化+单行显示）
|
||||
const renderVersionList = (): VNode => {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: 'custom-version-list',
|
||||
style: {
|
||||
width: '100%',
|
||||
padding: '10px 0',
|
||||
boxSizing: 'border-box',
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
[
|
||||
dyVersions.value.length > 0
|
||||
? dyVersions.value.map((tag, index) => {
|
||||
// 判断是否包含当前版本/最新版标记
|
||||
const isCurrentVersion = tag.includes('（当前版本）');
|
||||
const isLatestVersion = tag.includes('（最新版）');
|
||||
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: [
|
||||
'custom-version-item',
|
||||
isCurrentVersion ? 'custom-current-version' : '',
|
||||
isLatestVersion ? 'custom-latest-version' : '',
|
||||
],
|
||||
key: index,
|
||||
title: isCurrentVersion
|
||||
? '当前使用版本 - 点击右侧按钮复制版本号'
|
||||
: isLatestVersion
|
||||
? '最新版本 - 点击右侧按钮复制版本号'
|
||||
: '点击右侧按钮复制版本号',
|
||||
style: {
|
||||
width: '100%',
|
||||
padding: '8px 12px',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
borderRadius: '4px',
|
||||
transition: 'all 0.2s ease',
|
||||
boxSizing: 'border-box',
|
||||
// 核心：Flex布局确保文字+按钮一行显示
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
whiteSpace: 'nowrap', // 禁止整行换行
|
||||
// 版本标记背景色（区分当前版和最新版）
|
||||
backgroundColor: isCurrentVersion
|
||||
? 'rgba(24, 144, 255, 0.05)'
|
||||
: isLatestVersion
|
||||
? 'rgba(46, 125, 50, 0.05)'
|
||||
: 'transparent',
|
||||
},
|
||||
},
|
||||
[
|
||||
// 文本容器（单行溢出省略+标记颜色区分）
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
// 给复制按钮留固定宽度，避免文本挤压
|
||||
maxWidth: 'calc(100% - 40px)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap', // 文本单行显示
|
||||
},
|
||||
},
|
||||
[
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
color: isCurrentVersion
|
||||
? '#1890ff' // 当前版本文字色
|
||||
: isLatestVersion
|
||||
? '#2e7d32' // 最新版本文字色
|
||||
: '#1f2937', // 普通版本文字色
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
},
|
||||
tag // 显示带标记的完整文本（如：v1.0.0（当前版本））
|
||||
),
|
||||
]
|
||||
),
|
||||
// 复制按钮（固定大小+加载动画+hover效果）
|
||||
h(
|
||||
'button',
|
||||
{
|
||||
style: {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
backgroundColor: 'transparent',
|
||||
color: copyLoading.value[tag]
|
||||
? '#d1d5db' // 加载中颜色
|
||||
: isCurrentVersion
|
||||
? '#1890ff' // 当前版本按钮色
|
||||
: isLatestVersion
|
||||
? '#2e7d32' // 最新版本按钮色
|
||||
: '#9ca3af', // 普通版本按钮色
|
||||
cursor: copyLoading.value[tag] ? 'not-allowed' : 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '0',
|
||||
margin: '0',
|
||||
flexShrink: '0', // 禁止按钮收缩
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
onClick: (e: Event) => {
|
||||
e.stopPropagation(); // 阻止事件冒泡
|
||||
copyVersion(tag);
|
||||
},
|
||||
disabled: copyLoading.value[tag],
|
||||
title: copyLoading.value[tag] ? '复制中...' : '复制版本号',
|
||||
},
|
||||
[
|
||||
h(CopyOutlined, {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
// 加载时旋转动画
|
||||
animation: copyLoading.value[tag] ? 'custom-spin 1s linear infinite' : 'none',
|
||||
},
|
||||
}),
|
||||
]
|
||||
),
|
||||
]
|
||||
);
|
||||
})
|
||||
: h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
color: '#999',
|
||||
padding: '20px 0',
|
||||
fontSize: '14px',
|
||||
backgroundColor: '#f9fafb',
|
||||
borderRadius: '8px',
|
||||
margin: '0 12px',
|
||||
},
|
||||
},
|
||||
'暂无版本数据'
|
||||
),
|
||||
]
|
||||
);
|
||||
// 辅助方法：判断是否为当前版本（模板中使用）
|
||||
const isCurrentVersion = (version: string) => {
|
||||
return version.includes('（当前版本）');
|
||||
};
|
||||
|
||||
// 获取版本列表并显示Notification（核心修改这里）
|
||||
// 辅助方法：判断是否为最新版本（模板中使用）
|
||||
const isLatestVersion = (version: string) => {
|
||||
return version.includes('（最新版）');
|
||||
};
|
||||
|
||||
// 复制仓库地址方法（保留原有逻辑，无改动）
|
||||
const copyGitUrl = (repo: { name: string; url: string; color: string }) => {
|
||||
gitCopyLoading.value[repo.url] = true;
|
||||
const doCopy = async () => {
|
||||
try {
|
||||
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
|
||||
await navigator.clipboard.writeText(repo.url);
|
||||
message.success(`已复制 ${repo.name} 地址`);
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.style.position = 'absolute';
|
||||
textarea.style.top = '-9999px';
|
||||
textarea.style.left = '-9999px';
|
||||
textarea.value = repo.url;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const success = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
if (success) {
|
||||
message.success(`已复制 ${repo.name} 地址`);
|
||||
} else {
|
||||
throw new Error('execCommand 复制失败');
|
||||
}
|
||||
} catch (error) {
|
||||
message.warning(`复制 ${repo.name} 地址失败，请手动复制`);
|
||||
console.warn(`复制 ${repo.name} 地址失败：`, error);
|
||||
} finally {
|
||||
gitCopyLoading.value[repo.url] = false;
|
||||
}
|
||||
};
|
||||
|
||||
doCopy();
|
||||
};
|
||||
|
||||
// 版本查看方法（获取数据后控制 popover 显隐）
|
||||
const showVersionNotification = () => {
|
||||
useApiStore()
|
||||
.CheckTag()
|
||||
@@ -226,21 +128,19 @@ const showVersionNotification = () => {
|
||||
const versionLen = dyVersions.value.length;
|
||||
|
||||
if (versionLen > 0) {
|
||||
const newVersions = [...dyVersions.value]; // 深拷贝避免修改原数据
|
||||
|
||||
const newVersions = [...dyVersions.value];
|
||||
if (versionLen === 1) {
|
||||
// 只有1个版本：标记为“最新版”
|
||||
newVersions[0] = `${newVersions[0]}（最新版）`;
|
||||
} else {
|
||||
// 大于1个版本：第一个加“当前版本”，最后一个加“最新版”
|
||||
newVersions[0] = `${newVersions[0]}（当前版本）`;
|
||||
const lastIndex = versionLen - 1;
|
||||
newVersions[lastIndex] = `${newVersions[lastIndex]}（最新版）`;
|
||||
}
|
||||
|
||||
dyVersions.value = newVersions;
|
||||
}
|
||||
openVersionNotification();
|
||||
|
||||
// 打开版本 popover
|
||||
versionPopoverVisible.value = true;
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
@@ -251,41 +151,6 @@ const showVersionNotification = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 打开版本通知
|
||||
const openVersionNotification = () => {
|
||||
notification.open({
|
||||
key: notificationKey.value,
|
||||
message: '', // 空消息标题
|
||||
duration: 5, // 5秒自动关闭（可改为0不自动关闭）
|
||||
placement: 'topRight',
|
||||
description: renderVersionList(),
|
||||
style: {
|
||||
width: '520px',
|
||||
minWidth: '520px',
|
||||
marginTop: '50px',
|
||||
height: 'auto',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
|
||||
borderRadius: '8px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
});
|
||||
|
||||
// 强制覆盖AntD默认换行样式
|
||||
setTimeout(() => {
|
||||
const notificationEl = document.querySelector('.custom-version-notification');
|
||||
if (notificationEl) {
|
||||
const descriptionEls = notificationEl.querySelectorAll('.ant-notification-notice-description');
|
||||
descriptionEls.forEach((el) => {
|
||||
const htmlEl = el as HTMLElement;
|
||||
htmlEl.style.whiteSpace = 'normal';
|
||||
htmlEl.style.width = '100%';
|
||||
htmlEl.style.height = 'auto';
|
||||
htmlEl.style.overflow = 'visible';
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
|
||||
// 全局注入加载动画样式
|
||||
onMounted(() => {
|
||||
if (!document.querySelector('#custom-spin-style')) {
|
||||
@@ -300,19 +165,107 @@ onMounted(() => {
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
});
|
||||
|
||||
// Git 弹窗控制方法
|
||||
const showGit = () => {
|
||||
popoverVisible.value = !popoverVisible.value;
|
||||
console.log('打开开源地址弹窗');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 步骤1：添加 div 作为单个根元素 -->
|
||||
<StepinHeaderAction>
|
||||
<DayNightSwitch />
|
||||
</StepinHeaderAction>
|
||||
<!-- 版本按钮 -->
|
||||
|
||||
<!-- 版本查看：纯模板实现，移除 renderVersionList -->
|
||||
<StepinHeaderAction>
|
||||
<div @click="showVersionNotification" class="action-item">
|
||||
<TagsOutlined class="action-icon" />
|
||||
<div class="action-item">
|
||||
<a-popover v-model:visible="versionPopoverVisible" placement="bottom" trigger="click" overlay-class="version-popover-overlay" @visible-change="(visible) => versionPopoverVisible = visible">
|
||||
<template #content>
|
||||
<div class="version-popover-content">
|
||||
<!-- 版本列表：纯模板 v-for 实现，替代 VNode 渲染 -->
|
||||
<div class="custom-version-list" v-if="dyVersions.length > 0">
|
||||
<div class="custom-version-item" :class="{
|
||||
'custom-current-version': isCurrentVersion(version),
|
||||
'custom-latest-version': isLatestVersion(version)
|
||||
}" v-for="(version, index) in dyVersions" :key="index" :title="isCurrentVersion(version)
|
||||
? '当前使用版本 - 点击右侧按钮复制版本号'
|
||||
: isLatestVersion(version)
|
||||
? '最新版本 - 点击右侧按钮复制版本号'
|
||||
: '点击右侧按钮复制版本号'">
|
||||
<!-- 版本文本 -->
|
||||
<div class="version-text">
|
||||
<span :style="{
|
||||
color: isCurrentVersion(version) ? '#1890ff' : isLatestVersion(version) ? '#2e7d32' : '#1f2937'
|
||||
}">
|
||||
{{ version }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 复制按钮 -->
|
||||
<button class="version-copy-btn" :disabled="copyLoading[version]" @click.stop="copyVersion(version)" :title="copyLoading[version] ? '复制中...' : '复制版本号'">
|
||||
<CopyOutlined :style="{
|
||||
fontSize: '14px',
|
||||
color: copyLoading[version]
|
||||
? '#d1d5db'
|
||||
: isCurrentVersion(version)
|
||||
? '#1890ff'
|
||||
: isLatestVersion(version)
|
||||
? '#2e7d32'
|
||||
: '#9ca3af',
|
||||
animation: copyLoading[version] ? 'custom-spin 1s linear infinite' : 'none'
|
||||
}" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-tooltip placement="bottom">
|
||||
<template #title>
|
||||
<span>版本查看</span>
|
||||
</template>
|
||||
<TagsOutlined class="action-icon" @click="showVersionNotification" />
|
||||
</a-tooltip>
|
||||
</a-popover>
|
||||
</div>
|
||||
</StepinHeaderAction>
|
||||
|
||||
<!-- Git 开源地址弹窗（保留原有实现） -->
|
||||
<StepinHeaderAction>
|
||||
<div class="action-item">
|
||||
<a-popover v-model:visible="popoverVisible" placement="bottom" trigger="click" overlay-class="git-popover-overlay" @visible-change="(visible) => popoverVisible = visible">
|
||||
<template #content>
|
||||
<div class="git-popover-content">
|
||||
<div class="git-repo-item" v-for="repo in gitRepos" :key="repo.url">
|
||||
<div class="git-repo-name" :style="{ color: repo.color }">
|
||||
<span class="git-repo-tag" :style="{ backgroundColor: repo.color }"></span>
|
||||
{{ repo.name }}
|
||||
</div>
|
||||
<div class="git-repo-url-wrapper">
|
||||
<a :href="repo.url" target="_blank" class="git-repo-url" :style="{ color: repo.color }" title="点击打开仓库地址">
|
||||
{{ repo.url }}
|
||||
</a>
|
||||
<button class="git-copy-btn" :disabled="gitCopyLoading[repo.url]" @click.stop="copyGitUrl(repo)" title="复制仓库地址">
|
||||
<CopyOutlined :style="{
|
||||
fontSize: '12px',
|
||||
color: gitCopyLoading[repo.url] ? '#d1d5db' : repo.color,
|
||||
animation: gitCopyLoading[repo.url] ? 'custom-spin 1s linear infinite' : 'none'
|
||||
}" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-tooltip placement="bottom">
|
||||
<template #title>
|
||||
<span>项目开源地址</span>
|
||||
</template>
|
||||
<GithubOutlined class="action-icon" @click="showGit" />
|
||||
</a-tooltip>
|
||||
</a-popover>
|
||||
</div>
|
||||
</StepinHeaderAction>
|
||||
|
||||
<StepinHeaderAction>
|
||||
<Fullscreen class="-mx-xs -my-sm h-[56px] px-xs py-sm flex items-center" target=".stepin-layout" />
|
||||
</StepinHeaderAction>
|
||||
@@ -339,50 +292,214 @@ onMounted(() => {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 样式兜底：确保每个版本项内部单行，外部纵向排列 */
|
||||
:deep(.custom-version-notification) {
|
||||
.ant-notification-notice-description {
|
||||
white-space: normal !important; /* 允许版本项纵向换行 */
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
/* 版本 Popover 样式（纯模板适配） */
|
||||
:deep(.version-popover-overlay) {
|
||||
.ant-popover-inner {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.custom-version-item {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
white-space: nowrap !important; /* 禁止版本项内部换行 */
|
||||
padding: 8px 12px !important; /* 重置内边距，去掉左侧竖线空间 */
|
||||
|
||||
&:hover {
|
||||
background-color: #f5fafe !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 当前版本轻微高亮（可选，可删除） */
|
||||
.custom-current-version {
|
||||
background-color: rgba(24, 144, 255, 0.05) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(24, 144, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮hover样式 */
|
||||
button:hover {
|
||||
background-color: rgba(24, 144, 255, 0.1) !important;
|
||||
color: #1890ff !important;
|
||||
.ant-popover-arrow-content {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
/* 新增：根容器样式（和原布局保持一致） */
|
||||
|
||||
.version-popover-content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 版本列表（模板对应样式） */
|
||||
.custom-version-list {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.custom-version-item {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5fafe;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 当前版本/最新版本高亮 */
|
||||
.custom-current-version {
|
||||
background-color: rgba(24, 144, 255, 0.05) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(24, 144, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-latest-version {
|
||||
background-color: rgba(46, 125, 50, 0.05) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(46, 125, 50, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 版本文本容器 */
|
||||
.version-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
maxwidth: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 版本复制按钮 */
|
||||
.version-copy-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暂无版本数据 */
|
||||
.no-version-data {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 20px 0;
|
||||
font-size: 14px;
|
||||
background-color: #f9fafb;
|
||||
border-radius: 8px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
/* Git Popover 样式 */
|
||||
:deep(.git-popover-overlay) {
|
||||
.ant-popover-inner {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.ant-popover-arrow-content {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.git-popover-content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.git-repo-item {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.git-repo-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.git-repo-tag {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.git-repo-url-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background-color: #f9fafb;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.git-repo-url {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.git-copy-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 根容器样式 */
|
||||
.header-actions-root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; // 按钮之间间距，可根据需要调整
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
+226
-10
@@ -7,11 +7,121 @@
|
||||
<script lang="ts" setup>
|
||||
import LoginBox from './LoginBox.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { message, notification, Modal } from 'ant-design-vue'; // 引入 Modal 用于确认提示
|
||||
import { onMounted, ref, h } from 'vue';
|
||||
import { useApiStore } from '@/store';
|
||||
import { CopyOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 版本数据存储
|
||||
const currentTag = ref<string>('');
|
||||
const latestTag = ref<string>('未知版本');
|
||||
|
||||
// 复制版本号到剪贴板核心逻辑
|
||||
const copyToClipboard = async (content: string, type: string) => {
|
||||
if (!content || content === '未知版本') {
|
||||
message.warning(`${type}无有效内容可复制`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(content);
|
||||
message.success(`${type}已复制到剪贴板 ✅`);
|
||||
} else {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = content;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.left = '-9999px';
|
||||
textarea.style.top = '-9999px';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
message.success(`${type}已复制到剪贴板 ✅`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('复制失败：', err);
|
||||
message.error('复制失败，请手动选中复制');
|
||||
}
|
||||
};
|
||||
|
||||
// 统一的关闭处理：标记缓存 + 关闭通知
|
||||
const handleNoticeClose = (noticeKey: string) => {
|
||||
console.log('版本提醒通知已关闭，后续不再提醒');
|
||||
// 标记为已提醒，存入缓存（确保版本通知和确认弹窗都不再出现）
|
||||
localStorage.setItem('maintain_notice_shown', 'true');
|
||||
// 关闭版本通知
|
||||
notification.close(noticeKey);
|
||||
};
|
||||
|
||||
// 关闭前的确认提示弹窗
|
||||
const showCloseConfirm = (noticeKey: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认关闭',
|
||||
content: '关闭后该提醒将不再弹出，确定要关闭吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
// 确认关闭：执行统一处理
|
||||
handleNoticeClose(noticeKey);
|
||||
message.success('提醒已关闭，后续不再弹出');
|
||||
},
|
||||
onCancel: () => {
|
||||
// 取消关闭：不执行任何操作，保留版本通知
|
||||
message.info('已取消关闭');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 打开右上角 notification 通知
|
||||
const openVersionNotice = () => {
|
||||
const noticeKey = `version_notice_${Date.now()}`;
|
||||
notification.open({
|
||||
message: '温馨提示一下',
|
||||
key: noticeKey,
|
||||
duration: 0,
|
||||
placement: 'topRight',
|
||||
// 通知描述内容
|
||||
description: h('div', { class: 'notice-content' }, [
|
||||
h('p', { class: 'notice-desc' }, '当前您使用的docker镜像为阿里云镜像，已停止维护。'),
|
||||
h('p', { class: 'notice-version-item' }, [
|
||||
h('strong', { class: 'notice-version-label' }, '当前版本：'),
|
||||
h('span', { style: { color: '#ff4d4f', fontWeight: '500' } }, currentTag.value.replace('[不再维护]', '')),
|
||||
h(CopyOutlined, {
|
||||
class: 'notice-copy-icon',
|
||||
title: '复制当前版本',
|
||||
onClick: () => copyToClipboard(currentTag.value.replace('[不再维护]', ''), '当前版本'),
|
||||
}),
|
||||
]),
|
||||
h('p', { class: 'notice-version-item' }, [
|
||||
h('strong', { class: 'notice-version-label' }, '最新版本：'),
|
||||
h('span', { style: { color: '#52c41a', fontWeight: '500' } }, latestTag.value),
|
||||
h(CopyOutlined, {
|
||||
class: 'notice-copy-icon',
|
||||
title: '复制最新版本',
|
||||
onClick: () => copyToClipboard(latestTag.value, '最新版本'),
|
||||
}),
|
||||
]),
|
||||
h('p', { class: 'notice-tip' }, '建议升级到最新版本！'),
|
||||
]),
|
||||
// 「我已知晓」按钮：点击触发确认弹窗
|
||||
btn: () =>
|
||||
h(
|
||||
'button',
|
||||
{
|
||||
class: 'notice-confirm-btn',
|
||||
onClick: () => {
|
||||
// 不直接关闭，先弹出确认提示
|
||||
showCloseConfirm(noticeKey);
|
||||
},
|
||||
},
|
||||
'我已知晓'
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
useApiStore()
|
||||
.AppisInit()
|
||||
@@ -21,21 +131,43 @@ onMounted(() => {
|
||||
router.push('/init');
|
||||
}
|
||||
});
|
||||
|
||||
useApiStore()
|
||||
.CheckTag()
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
if (res.data.length > 0) {
|
||||
const tag = res.data[0];
|
||||
if (tag.indexOf('不再维护') !== -1) {
|
||||
const hasShown = localStorage.getItem('maintain_notice_shown');
|
||||
if (!hasShown) {
|
||||
currentTag.value = tag;
|
||||
latestTag.value = res.data.length >= 2 ? res.data[1] : '未知版本';
|
||||
openVersionNotice();
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error(res.message);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
});
|
||||
|
||||
function onLoginSuccess() {
|
||||
if (isMobileBrowser()) router.push('/mobile');
|
||||
else router.push('/dashboard');
|
||||
}
|
||||
// 精准判断移动端浏览器（复用之前的核心逻辑，简化版）
|
||||
|
||||
const isMobileBrowser = (): boolean => {
|
||||
if (typeof navigator === 'undefined' || typeof window === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
const userAgent = navigator.userAgent.toLowerCase();
|
||||
// 匹配手机UA（排除平板）
|
||||
const mobileUA = /android|iphone|ipod|blackberry|windows phone|iemobile|opera mini/i.test(userAgent);
|
||||
const isTablet = /ipad|tablet|playbook|kindle|android 3\.|android 4\.[0-3]/.test(userAgent);
|
||||
// 触摸设备+小屏兜底
|
||||
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
const isMobileScreen = window.innerWidth <= 768 && window.innerHeight <= 1024;
|
||||
|
||||
@@ -51,13 +183,12 @@ function onLoginFail(reason: string, fields: any) {
|
||||
<style scoped lang="less">
|
||||
.login {
|
||||
height: 100vh;
|
||||
min-height: -webkit-fill-available; /* 适配iOS安全区域 */
|
||||
min-height: -webkit-fill-available;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
position: relative;
|
||||
overflow: hidden; /* 防止装饰元素溢出 */
|
||||
padding: 20px 0; /* 移动端上下内边距，避免卡片贴边 */
|
||||
overflow: hidden;
|
||||
padding: 20px 0;
|
||||
|
||||
// 装饰性背景元素 - 移动端适配尺寸
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -97,11 +228,96 @@ function onLoginFail(reason: string, fields: any) {
|
||||
}
|
||||
}
|
||||
|
||||
/* 适配iOS安全区域 */
|
||||
@supports (bottom: env(safe-area-inset-bottom)) {
|
||||
.login {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.ant-notification {
|
||||
.ant-notification-notice {
|
||||
width: 500px !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
color: #334155 !important;
|
||||
width: 480px !important;
|
||||
|
||||
.notice-desc {
|
||||
margin-bottom: 12px !important;
|
||||
padding-left: 2px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.notice-version-item {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
margin: 8px 0 !important;
|
||||
padding: 6px 10px !important;
|
||||
background-color: #f8fafc !important;
|
||||
border-radius: 6px !important;
|
||||
transition: background-color 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f1f5f9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-version-label {
|
||||
color: #1e293b !important;
|
||||
width: 70px !important;
|
||||
flex-shrink: 0 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.notice-copy-icon {
|
||||
flex-shrink: 0 !important;
|
||||
color: #165dff !important;
|
||||
font-size: 16px !important;
|
||||
cursor: pointer !important;
|
||||
transition: all 0.2s ease !important;
|
||||
margin-left: 8px !important;
|
||||
|
||||
&:hover {
|
||||
color: #0d47a1 !important;
|
||||
transform: scale(1.1) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-tip {
|
||||
margin-top: 12px !important;
|
||||
color: #64748b !important;
|
||||
padding-left: 2px !important;
|
||||
font-style: italic !important;
|
||||
font-size: 13px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-confirm-btn {
|
||||
background-color: #165dff !important;
|
||||
color: #ffffff !important;
|
||||
border: none !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 4px 12px !important;
|
||||
font-size: 13px !important;
|
||||
cursor: pointer !important;
|
||||
transition: background-color 0.2s ease !important;
|
||||
margin-top: 12px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #0d47a1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user