refacting: delete cloud comp

2026-06-30 07:56:09 +08:00
parent 024f306636
commit 75169c70a5
10 changed files with 944 additions and 470 deletions
@@ -21,9 +21,6 @@
            <el-icon v-if="index == 4" :size="20">
              <Calendar />
            </el-icon>
-            <el-icon v-if="index == 5" :size="20">
-              <MostlyCloudy />
-            </el-icon>
            <el-icon v-if="index == 10" :size="20">
              <Setting />
            </el-icon>
@@ -1,22 +1,73 @@
 <template>
  <div class="ttt">
-    <div class="yuliu" :style="style">
+    <!-- 动态光斑背景 -->
+    <div class="bg-orbs">
+      <span class="orb orb-1"></span>
+      <span class="orb orb-2"></span>
+      <span class="orb orb-3"></span>
    </div>
-    <el-card class="box-card">

-      <el-form>
-        <div class="title-container">
-          <h3>秘密基地</h3>
+    <div class="content">
+      <!-- 玻璃卡片 -->
+      <div class="glass-card">
+        <div class="brand">
+          <span class="brand-mark">✦</span>
+          <h1 class="brand-name">{{ SITE_NAME }}</h1>
+          <p class="brand-sub">Secret Base · 秘密基地</p>
        </div>
-        <div>
-          <el-button type="primary" size="large" @click="handleOidcLogin">统一登录</el-button>
-        </div>
-      </el-form>
-      ------------------------------------------------------------
-      <div>
-        微信/支付宝
+
+        <div class="divider"></div>
+
+        <el-button
+          class="login-btn"
+          size="large"
+          @click="handleOidcLogin"
+        >
+          <span class="login-btn-content">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5zm0 2.18l7 3.89v4.93c0 4.43-3.07 8.58-7 9.71-3.93-1.13-7-5.28-7-9.71V8.07l7-3.89z"/>
+              <path d="M12 11h-2v2h-2v2h2v2h2v-2h2v-2h-2z"/>
+            </svg>
+            Login
+          </span>
+        </el-button>
+
+        <!-- <p class="login-hint">
+          通过 <a href="https://goauthentik.io" target="_blank">Authentik</a> OIDC 安全登录
+        </p> -->
      </div>
-    </el-card>
+    </div>
+
+    <!-- 右侧关联链接 -->
+    <div class="side-links">
+      <a
+        v-for="link in sideLinks"
+        :key="link.name"
+        :href="link.url"
+        target="_blank"
+        class="side-link"
+        :title="link.name"
+      >
+        <span class="side-link-icon" v-html="link.icon"></span>
+        <span class="side-link-name">{{ link.name }}</span>
+      </a>
+    </div>
+
+    <!-- 左侧外部网站链接 -->
+    <div class="external-links">
+      <a
+        v-for="link in externalLinks"
+        :key="link.name"
+        :href="link.url"
+        target="_blank"
+        class="external-link"
+        :title="link.name"
+      >
+        <span class="external-link-icon" v-html="link.icon"></span>
+        <span class="external-link-name">{{ link.name }}</span>
+      </a>
+    </div>
+
    <div class="footer">
      <div class="footer-left">
        <span>{{ SITE_NAME }} {{ COPYRIGHT_TEXT }}</span>
@@ -32,7 +83,6 @@
 </template>

 <script lang="ts" setup>
-import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { SITE_NAME, COPYRIGHT_TEXT, ICP_NUMBER, ICP_QUERY_URL } from '@/const/site'

@@ -62,50 +112,430 @@ const openGithub = () => {
  window.open('https://github.com/simple321vip', '_blank')
 }

-const style = reactive({} as any)
-style.width = window.innerWidth * 0.7 + 'px'
+/**
+ * 右侧固定关联网站链接。改这里即可增删。
+ * icon: 简单 inline SVG（24x24），用 currentColor 跟父元素文字色联动
+ */
+const sideLinks = [
+  {
+    name: 'Gitea',
+    url: 'https://gitea.violin-work.online',
+    // Gitea 标志性元素：圆形 + 三个肉垫（猫爪印）
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="14" r="6"/><ellipse cx="6" cy="8" rx="2" ry="2.5"/><ellipse cx="12" cy="5" rx="2" ry="2.5"/><ellipse cx="18" cy="8" rx="2" ry="2.5"/></svg>'
+  },
+  {
+    name: 'Blog',
+    url: 'https://www.violin-home.cn/blog',
+    icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h10v2H7zm0 4h10v2H7z"/></svg>'
+  },
+  {
+    name: 'Authentik',
+    url: 'https://auth.violin-work.online',
+    // Authentik 标志性元素：盾牌 + 钥匙孔
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.5a2 2 0 110 1 2 2 0 010-1zm-2.83 4.95L8 14l-1.17 2.45L4 18l2.83-1.55z"/></svg>'
+  },
+  {
+    name: 'KubeSphere',
+    url: 'https://k8s.violin-work.online',
+    // KubeSphere 标志性元素：球体 + 经线纬线（地球网格）
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="4" ry="10"/><line x1="2" y1="12" x2="22" y2="12"/></svg>'
+  },
+  {
+    name: 'Viking (RAG)',
+    url: 'https://viking.violin-work.online/',
+    // Viking / 维京：维京头盔 + 翅膀，或简化为双翼头盔
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L9 5H6v4l-3 2 3 1v3a6 6 0 0012 0v-3l3-1-3-2V5h-3l-3-3zm0 4a2 2 0 110 4 2 2 0 010-4z"/><path d="M3 11l-1 1 1 1zm18 0l1 1-1 1z"/></svg>'
+  },
+  {
+    name: 'Nextcloud',
+    url: 'https://cloud.violin-work.online/',
+    // Nextcloud 标志性元素：三个圆环组成的"云"
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="14" r="4"/><circle cx="14" cy="9" r="4"/><circle cx="18" cy="15" r="3"/></svg>'
+  },
+  {
+    name: 'MinIO',
+    url: 'https://minio.violin-work.online/',
+    // MinIO 标志性元素：三层堆叠的小方块
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="14" width="18" height="6" rx="1"/><rect x="5" y="8" width="14" height="5" rx="1" opacity="0.7"/><rect x="7" y="3" width="10" height="4" rx="1" opacity="0.45"/></svg>'
+  }
+] as const

+/**
+ * 左侧固定外部网站链接。
+ */
+const externalLinks = [
+  {
+    name: 'GitHub',
+    url: 'https://github.com/simple321vip',
+    icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>'
+  },
+  {
+    name: 'MiniMax',
+    url: 'https://www.minimaxi.com/',
+    // MiniMax 标志性元素：六角星 + 中心点（极小化极大概括）
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-1.5L12 2z"/></svg>'
+  },
+  {
+    name: '百度',
+    url: 'https://www.baidu.com/',
+    // 百度：爪形脚印
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><ellipse cx="9" cy="11" rx="3.5" ry="5"/><ellipse cx="15" cy="11" rx="3.5" ry="5"/><circle cx="6" cy="5" r="1.5"/><circle cx="12" cy="3" r="1.5"/><circle cx="18" cy="5" r="1.5"/></svg>'
+  },
+  {
+    name: '腾讯云',
+    url: 'https://cloud.tencent.com/',
+    // 腾讯云：云朵 + T 字标识
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M6 18a4 4 0 010-8 5 5 0 019.58-1.5A4 4 0 0118 18H6z"/><text x="12" y="16" font-size="8" font-weight="bold" text-anchor="middle" fill="#0f0c29">T</text></svg>'
+  },
+  {
+    name: '菜鸟教程',
+    url: 'https://www.runoob.com/',
+    // 菜鸟教程：鸟的剪影（飞行）
+    icon: '<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M22 4l-2 2-3-1-5 3-4-2-3 3 2 2 4-2 3 2 4-2 4 1 1-2-3-2 2-2zM2 14l4 4 6-1 4 2 2-1-3-3-4 1-3-3-4 1-2-1z"/></svg>'
+  }
+] as const
 </script>
+
 <style scoped>
-.text {
-  font-size: 14px;
-}
-
-.item {
-  padding: 18px 0;
-}
-
 .ttt {
-  /* flex column + min-height 100vh：footer 永远在视口底部，
-     内容少时 footer 贴底，内容多时 footer 在内容之后但不漂 */
+  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
+  overflow: hidden;
+  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
 }

-.yuliu {
-  /* width: 600px; */
-  height: 300px;
-  float: left;
-  /* background-color: antiquewhite; */
-  background: url('../../assets/have_a_nice_day.jpeg') center top no-repeat;
-  background-size: cover;
+/* ============ 动态光斑背景 ============ */
+.bg-orbs {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
 }

-.box-card {
-  /* 中间内容区撑开剩余空间 */
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.5;
+  animation: float 20s ease-in-out infinite;
+}
+
+.orb-1 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, #667eea 0%, transparent 70%);
+  top: -150px;
+  left: -100px;
+  animation-delay: 0s;
+}
+
+.orb-2 {
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, #f093fb 0%, transparent 70%);
+  bottom: -200px;
+  right: -150px;
+  animation-delay: -7s;
+}
+
+.orb-3 {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, #4facfe 0%, transparent 70%);
+  top: 40%;
+  left: 50%;
+  animation-delay: -14s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(50px, -30px) scale(1.1); }
+  66% { transform: translate(-30px, 50px) scale(0.9); }
+}
+
+/* ============ 内容区 ============ */
+.content {
+  position: relative;
+  z-index: 1;
  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
 }

+/* ============ 玻璃卡片 ============ */
+.glass-card {
+  width: 100%;
+  max-width: 420px;
+  padding: 56px 40px 48px;
+  background: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.brand {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.brand-mark {
+  display: inline-block;
+  font-size: 32px;
+  background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-bottom: 12px;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.7; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.1); }
+}
+
+.brand-name {
+  margin: 0 0 8px;
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  background: linear-gradient(135deg, #fff 0%, #b8c6db 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.brand-sub {
+  margin: 0;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 2px;
+}
+
+/* ============ 分隔线 ============ */
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.2) 50%,
+    transparent 100%);
+  margin: 24px 0 32px;
+}
+
+/* ============ 登录按钮 ============ */
+.login-btn {
+  width: 100%;
+  height: 50px !important;
+  border: none !important;
+  border-radius: 12px !important;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  overflow: hidden;
+}
+
+.login-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
+}
+
+.login-btn:active {
+  transform: translateY(0);
+}
+
+.login-btn-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  color: #fff;
+}
+
+.login-hint {
+  margin: 20px 0 0;
+  text-align: center;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.login-hint a {
+  color: rgba(255, 255, 255, 0.6);
+  text-decoration: none;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
+}
+
+.login-hint a:hover {
+  color: #fff;
+  border-bottom-color: #fff;
+}
+
+/* ============ 右侧固定关联链接 ============ */
+.side-links {
+  position: fixed;
+  right: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  z-index: 10;
+}
+
+.side-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.side-link:hover {
+  background: rgba(102, 126, 234, 0.25);
+  border-color: rgba(102, 126, 234, 0.6);
+  color: #fff;
+  transform: scale(1.1);
+  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
+}
+
+.side-link-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* tooltip 显示名字 */
+.side-link-name {
+  position: absolute;
+  right: 56px;
+  white-space: nowrap;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
+  color: #fff;
+  font-size: 13px;
+  opacity: 0;
+  transform: translateX(10px);
+  pointer-events: none;
+  transition: all 0.25s ease;
+}
+
+.side-link:hover .side-link-name {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 移动端隐藏侧栏（屏幕太窄） */
+@media (max-width: 768px) {
+  .side-links {
+    display: none;
+  }
+}
+
+/* ============ 左侧外部网站链接 ============ */
+.external-links {
+  position: fixed;
+  left: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  z-index: 10;
+}
+
+.external-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.external-link:hover {
+  background: rgba(118, 75, 162, 0.25);
+  border-color: rgba(240, 147, 251, 0.6);
+  color: #fff;
+  transform: scale(1.1);
+  box-shadow: 0 4px 20px rgba(240, 147, 251, 0.4);
+}
+
+.external-link-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* tooltip 在右侧（跟左侧链接方向相反） */
+.external-link-name {
+  position: absolute;
+  left: 56px;
+  white-space: nowrap;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
+  color: #fff;
+  font-size: 13px;
+  opacity: 0;
+  transform: translateX(-10px);
+  pointer-events: none;
+  transition: all 0.25s ease;
+}
+
+.external-link:hover .external-link-name {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+@media (max-width: 768px) {
+  .external-links {
+    display: none;
+  }
+}
+
+/* ============ Footer ============ */
 .footer {
+  position: relative;
+  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding: 12px 24px;
-  border-top: 1px solid rgba(151, 151, 151, 0.2);
-  font-size: 16px;
-  color: #666;
+  padding: 16px 32px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
 }

 .footer-left {
@@ -120,20 +550,27 @@ style.width = window.innerWidth * 0.7 + 'px'
 }

 .separator {
-  color: #ccc;
+  color: rgba(255, 255, 255, 0.25);
 }

 .icp-link {
  cursor: pointer;
  user-select: none;
+  transition: color 0.2s;
 }

 .icp-link:hover {
-  color: #409eff;
+  color: rgba(255, 255, 255, 0.85);
 }

 .github-icon {
  vertical-align: middle;
  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.github-icon:hover {
+  opacity: 1;
 }
 </style>