pxl/tk-page-Fan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新版ui 待优化

Browse Source
This commit is contained in:
没复习
2026-01-16 20:12:48 +08:00
parent b030675ee3
commit 7bd4a92da6
3 changed files with 1642 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

653
src/static/css/cyber-design.less Normal file
View File

@@ -0,0 +1,653 @@
/**
* Cyber Design System - 现代科技感设计系统
* 基于 test.html 的设计规范
*/
// ============================================
// 设计变量 Design Tokens
// ============================================
// 主色调
@primary-color: #0052CC;
@cyber-blue: #00D2FF;
@cyber-blue-dark: #0052CC;
// 灰度色阶
@tech-gray-50: #F8FAFC;
@tech-gray-100: #F1F5F9;
@tech-gray-200: #E2E8F0;
@tech-gray-300: #CBD5E1;
@tech-gray-400: #94A3B8;
@tech-gray-500: #64748B;
@tech-gray-600: #475569;
@tech-gray-700: #334155;
@tech-gray-800: #1E293B;
@tech-gray-900: #0F172A;
// 功能色
@success-color: #10B981;
@warning-color: #F59E0B;
@error-color: #EF4444;
// 渐变
@cyber-gradient: linear-gradient(135deg, @cyber-blue 0%, @cyber-blue-dark 100%);
@page-gradient: radial-gradient(circle at top right, #f8fafc, #eff6ff);
// 圆角
@radius-sm: 8px;
@radius-md: 12px;
@radius-lg: 16px;
@radius-xl: 20px;
@radius-2xl: 24px;
@radius-3xl: 32px;
// 阴影
@shadow-soft-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.03);
@shadow-cyber-glow: 0 0 20px rgba(0, 210, 255, 0.3);
@shadow-premium: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
@shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
@shadow-button: 0 4px 12px rgba(0, 82, 204, 0.25);
// ============================================
// 全局基础样式
// ============================================
// 页面背景
.cyber-page-bg {
background: @page-gradient;
min-height: 100vh;
}
// 内容容器
.cyber-container {
max-width: 1440px;
margin: 0 auto;
padding: 24px 32px;
}
// ============================================
// 玻璃态组件 Glass Components
// ============================================
// 玻璃态头部卡片
.glass-header {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: @radius-3xl;
padding: 28px 32px;
box-shadow: @shadow-glass;
}
// 玻璃态内容卡片
.glass-card {
background: #ffffff;
border-radius: @radius-3xl;
box-shadow: @shadow-premium;
border: 1px solid rgba(255, 255, 255, 0.8);
overflow: hidden;
}
// ============================================
// 按钮系统 Button System
// ============================================
// 主渐变按钮
.cyber-button {
background: @cyber-gradient;
color: #ffffff;
border: none;
border-radius: @radius-xl;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: @shadow-button;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
&:hover {
filter: brightness(1.1);
box-shadow: @shadow-cyber-glow;
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
filter: none;
transform: none;
}
}
// 幽灵按钮
.ghost-button {
background: #ffffff;
color: @tech-gray-600;
border: 1px solid @tech-gray-200;
border-radius: @radius-xl;
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
&:hover {
background: @tech-gray-50;
border-color: @tech-gray-300;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
&:active {
transform: translateY(0);
}
}
// ============================================
// 输入框系统 Input System
// ============================================
.input-tech {
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: @radius-xl;
padding: 12px 16px;
font-size: 14px;
color: @tech-gray-800;
transition: all 0.2s ease;
box-shadow: @shadow-soft-inner;
outline: none;
&::placeholder {
color: @tech-gray-400;
}
&:focus {
border-color: rgba(0, 82, 204, 0.3);
box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08);
}
}
// ============================================
// 标签系统 Label System
// ============================================
.label-tech {
font-size: 11px;
font-weight: 700;
color: @tech-gray-400;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 6px;
padding-left: 4px;
margin-bottom: 8px;
}
// 徽章标签
.badge-level {
display: inline-block;
padding: 4px 10px;
background: rgba(245, 158, 11, 0.1);
color: #D97706;
font-size: 10px;
font-weight: 700;
border-radius: 8px;
border: 1px solid rgba(245, 158, 11, 0.2);
}
.badge-primary {
display: inline-block;
padding: 4px 12px;
background: rgba(0, 82, 204, 0.08);
color: @primary-color;
font-size: 12px;
font-weight: 500;
border-radius: 20px;
}
// ============================================
// 表格系统 Table System
// ============================================
.table-tech {
width: 100%;
border-collapse: separate;
border-spacing: 0;
thead tr {
th {
padding: 16px 16px 20px;
font-size: 11px;
font-weight: 700;
color: @tech-gray-400;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid @tech-gray-100;
text-align: left;
}
}
tbody tr {
transition: background 0.15s ease;
&:hover {
background: @tech-gray-50;
}
td {
padding: 18px 16px;
font-size: 14px;
color: @tech-gray-600;
border-bottom: 1px solid transparent;
}
}
}
// ============================================
// 分页系统 Pagination System
// ============================================
.pagination-tech {
display: flex;
align-items: center;
gap: 8px;
.page-btn {
width: 36px;
height: 36px;
border-radius: @radius-xl;
border: none;
background: transparent;
color: @tech-gray-600;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
&.active {
background: @tech-gray-900;
color: #ffffff;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
}
}
// ============================================
// 信息区块 Info Block
// ============================================
.info-pill {
display: flex;
align-items: center;
gap: 24px;
background: rgba(255, 255, 255, 0.5);
padding: 8px 16px;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
font-size: 12px;
font-weight: 500;
.info-label {
color: @tech-gray-400;
}
.info-value {
color: @tech-gray-700;
font-family: 'SF Mono', Monaco, monospace;
}
.info-divider {
width: 1px;
height: 12px;
background: @tech-gray-200;
}
}
// ============================================
// 页脚区块 Footer Section
// ============================================
.footer-section {
padding: 20px 32px;
background: rgba(248, 250, 252, 0.5);
border-top: 1px solid @tech-gray-100;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.stat-group {
display: flex;
align-items: center;
gap: 32px;
.stat-item {
display: flex;
flex-direction: column;
gap: 2px;
.stat-label {
font-size: 12px;
color: @tech-gray-400;
font-weight: 500;
}
.stat-value {
font-size: 14px;
font-weight: 700;
color: @tech-gray-900;
&.primary {
color: @primary-color;
}
}
}
}
// ============================================
// 滚动条美化 Scrollbar
// ============================================
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: @tech-gray-300;
border-radius: 10px;
&:hover {
background: @tech-gray-400;
}
}
// ============================================
// Element Plus 组件覆盖 - 输入框
// ============================================
.cyber-form {
// 输入框
.el-input__wrapper {
background: #ffffff !important;
border: 1px solid rgba(226, 232, 240, 0.6) !important;
border-radius: @radius-xl !important;
box-shadow: @shadow-soft-inner !important;
padding: 4px 16px !important;
transition: all 0.2s ease !important;
&:hover {
border-color: @tech-gray-300 !important;
}
&.is-focus {
border-color: rgba(0, 82, 204, 0.3) !important;
box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
}
}
.el-input--large .el-input__wrapper {
height: 44px !important;
}
// 选择器
.el-select__wrapper {
background: #ffffff !important;
border: 1px solid rgba(226, 232, 240, 0.6) !important;
border-radius: @radius-xl !important;
box-shadow: @shadow-soft-inner !important;
padding: 4px 16px !important;
min-height: 44px !important;
transition: all 0.2s ease !important;
&:hover {
border-color: @tech-gray-300 !important;
}
&.is-focus {
border-color: rgba(0, 82, 204, 0.3) !important;
box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.08) !important;
}
}
// 复选框
.el-checkbox {
height: 44px;
padding: 0 16px;
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: @radius-xl;
transition: all 0.2s ease;
&:hover {
border-color: @tech-gray-300;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: @primary-color;
border-color: @primary-color;
}
.el-checkbox__label {
font-weight: 600;
color: @tech-gray-600;
}
}
// 按钮 - 主要
.el-button--primary {
background: @cyber-gradient !important;
border: none !important;
border-radius: @radius-xl !important;
font-weight: 600 !important;
box-shadow: @shadow-button !important;
transition: all 0.3s ease !important;
height: 44px !important;
padding: 0 24px !important;
&:hover {
filter: brightness(1.1);
box-shadow: @shadow-cyber-glow !important;
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
&:disabled,
&.is-disabled {
opacity: 0.6 !important;
filter: none !important;
transform: none !important;
cursor: not-allowed !important;
}
}
// 按钮 - 默认
.el-button--default {
background: #ffffff !important;
border: 1px solid @tech-gray-200 !important;
border-radius: @radius-xl !important;
color: @tech-gray-600 !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
height: 44px !important;
padding: 0 20px !important;
&:hover {
background: @tech-gray-50 !important;
border-color: @tech-gray-300 !important;
transform: translateY(-1px);
}
}
}
// ============================================
// Element Plus 组件覆盖 - 表格
// ============================================
.cyber-table {
.el-table {
background: transparent !important;
--el-table-border-color: transparent;
--el-table-header-bg-color: transparent;
--el-table-row-hover-bg-color: rgba(248, 250, 252, 0.8);
th.el-table__cell {
background: transparent !important;
font-size: 11px !important;
font-weight: 700 !important;
color: @tech-gray-400 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
padding: 16px 12px 20px !important;
border-bottom: 1px solid @tech-gray-100 !important;
}
td.el-table__cell {
padding: 16px 12px !important;
font-size: 14px !important;
color: @tech-gray-600 !important;
border-bottom: 1px solid transparent !important;
}
.el-table__row:hover > td.el-table__cell {
background: @tech-gray-50 !important;
}
}
}
// ============================================
// Element Plus 组件覆盖 - 分页
// ============================================
.cyber-pagination {
.el-pagination {
--el-pagination-bg-color: transparent;
--el-pagination-hover-color: @primary-color;
.el-pager li {
min-width: 36px;
height: 36px;
line-height: 36px;
border-radius: @radius-xl;
font-weight: 700;
font-size: 12px;
margin: 0 2px;
background: transparent;
transition: all 0.2s ease;
&:hover {
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
&.is-active {
background: @tech-gray-900 !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
}
.btn-prev,
.btn-next {
background: transparent;
border-radius: @radius-xl;
transition: all 0.2s ease;
&:hover {
background: #ffffff;
color: @primary-color;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
}
.el-select__wrapper {
background: #ffffff !important;
border: 1px solid @tech-gray-200 !important;
border-radius: @radius-xl !important;
}
}
}
// ============================================
// 布局辅助类 Layout Utilities
// ============================================
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
// 分割线
.divider-line {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, @tech-gray-200, transparent);
margin: 24px 0;
}
.divider-vertical {
width: 1px;
height: 24px;
background: @tech-gray-200;
}

769
src/views/hosts/hostsList.vue
View File

File diff suppressed because it is too large Load Diff

152
src/views/nav.vue
View File

@@ -1,17 +1,19 @@
<template>
<div class="app-container">
<!-- <Sidebar class="noneText" @activeIndex="activeIndexFn" /> -->
<div class="content ">
<!-- <div v-show="activeIndexA == 1">
<workbenches />
</div> -->
<div>
<div class="app-container cyber-page">
<div class="cyber-main-container">
<!-- 主内容区域 -->
<div class="content-wrapper glass-content">
<hostsList />
</div>
<!-- <div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div> -->
<!-- 底部状态栏 -->
<div class="footer-bar">
<div class="footer-content">
<span class="footer-icon">⏱️</span>
<span class="footer-label">{{ $t('common.expirationtime') }}</span>
<span class="footer-value">{{ time }}</span>
</div>
</div>
<div class="footer">
{{ $t('common.expirationtime') }}{{ time }}
</div>
</div>
</template>
@@ -19,25 +21,23 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, reactive, onMounted } from "vue";
// import Sidebar from '../components/Sidebar.vue';
import { RouterLink, RouterView } from 'vue-router'
import hostsList from '@/views/hosts/hostsList.vue'
import { ElMessage } from 'element-plus';
import { getUser } from "@/utils/storage";
// import workbenches from '@/views/hosts/workbenches.vue'
import { tokenStore, UserStore } from '@/stores/notice'
const userCache = UserStore()
const { t } = useI18n();
const time = ref(formatTimestamp(userCache.user.brotherExpireTime))
// 时间格式化方法 - 将12位时间戳转为YYYY-MM-DD HH:mm:ss格式
function formatTimestamp(timestamp) {
try {
// 转换为数字
const ts = Number(timestamp);
if (isNaN(ts)) {
return '--';
}
// 处理13位时间戳（毫秒级）
const date = new Date(ts > 999999999999 ? ts : ts * 1000);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -51,57 +51,120 @@ function formatTimestamp(timestamp) {
return '--';
}
}
</script>
<style lang="less">
@import "@/static/css/cyber-design.less";
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
/* 页面无法选中 */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.app-container {
display: flex;
.app-container.cyber-page {
width: 1600px;
height: 900px;
background-color: @bg-color;
background: radial-gradient(ellipse at top right, #f0f9ff 0%, #e0f2fe 30%, #f1f5f9 100%);
position: relative;
overflow: hidden;
// 背景装饰
&::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.noneText {
/* 页面无法选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 82, 204, 0.06) 0%, transparent 70%);
pointer-events: none;
}
}
.sidebar {
width: 200px;
background-color: @bg-color;
padding: 20px;
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
.cyber-main-container {
width: 100%;
height: 100%;
padding: 20px 24px;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.content {
// margin-left: 280px;
margin-left: 25px;
margin-right: 25px;
width: 1540px;
height: 848px;
background: #FFFFFF;
border-radius: 36px;
margin-top: 16px;
.content-wrapper.glass-content {
flex: 1;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow:
0 20px 60px -10px rgba(0, 0, 0, 0.08),
0 10px 30px -5px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
overflow: hidden;
position: relative;
}
.footer-bar {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
}
.footer-content {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
.footer-icon {
font-size: 14px;
}
.footer-label {
font-size: 13px;
color: #64748b;
font-weight: 500;
}
.footer-value {
font-size: 13px;
color: #0052CC;
font-weight: 600;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}
}
.center-justify {
@@ -109,11 +172,4 @@ html {
justify-content: space-around;
align-items: center;
}
.footer{
position: absolute;
bottom: 10px;
left: calc(50% - 150px);
color: aqua;
font-size: 16px;
}
</style>