feat: add initial project setup with Vue, Vite and Vuetify

2025-03-26 01:12:35 +08:00
parent 01e7a57ed0
commit 361af96ba0
28 changed files with 8415 additions and 8 deletions
--- a/dist/assets/images/logo.png
+++ b/dist/assets/images/logo.png
--- a/dist/assets/images/wechat-qr.png
+++ b/dist/assets/images/wechat-qr.png
--- a/dist/assets/index-B1oLPTqx.css
+++ b/dist/assets/index-B1oLPTqx.css
--- a/dist/assets/index-UMkeQYsC.js
+++ b/dist/assets/index-UMkeQYsC.js
--- a/dist/favicon.ico
+++ b/dist/favicon.ico
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
+  <!-- 核心元数据 -->
+  <title>Cat Tom | Try to do my best!</title>
+  <meta name="description" content="Cat Tom的个人主页，展示作品和联系方式">
+  
+  <!-- 主题色 -->
+  <meta name="theme-color" content="#a8d8ea">
+  
+  <!-- PWA配置 -->
+  <link rel="manifest" href="/manifest.webmanifest">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Cat Tom">
+  <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">
+  
+  <!-- 预加载关键资源 -->
+  <link rel="preload" href="/assets/images/logo.png" as="image" type="image/png">
+  <link rel="preload" href="/assets/images/wechat-qr.png" as="image" type="image/png">
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" as="style">
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  
+  <!-- 字体加载策略 -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" media="print" onload="this.media='all'">
+  <noscript>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
+  </noscript>
+  
+  <!-- 默认图标 -->
+  <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg">
+  <link rel="alternate icon" href="/favicon.ico">
+  
+  <!-- 社交分享优化 -->
+  <meta property="og:title" content="Cat Tom | Try to do my best!">
+  <meta property="og:description" content="Cat Tom的个人主页，展示作品和联系方式">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://yourdomain.com">
+  <meta property="og:image" content="/assets/images/social-share.png">
+  
+  <!-- 防止搜索引擎索引开发环境 -->
+  <meta name="robots" content="noindex, nofollow">
+  <script type="module" crossorigin src="/assets/index-UMkeQYsC.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B1oLPTqx.css">
+</head>
+<body>
+  <div id="app">
+    <!-- 初始加载动画 -->
+    <div class="app-loading">
+      <div class="loading-spinner">
+        <svg viewBox="0 0 50 50">
+          <circle cx="25" cy="25" r="20" fill="none" stroke="#7ac5e8" stroke-width="4"></circle>
+        </svg>
+      </div>
+    </div>
+  </div>
+
+  <!-- 性能监控脚本 (仅开发环境) -->
+  
+  <!-- 主应用脚本 -->
+  
+  <!-- 加载状态样式 -->
+  <style>
+    .app-loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(255,255,255,0.8);
+      z-index: 9999;
+      transition: opacity 0.3s ease;
+    }
+    
+    .loading-spinner svg {
+      animation: rotate 1.5s linear infinite;
+      width: 50px;
+      height: 50px;
+    }
+    
+    .loading-spinner circle {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: 0;
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+    
+    @keyframes rotate {
+      100% { transform: rotate(360deg); }
+    }
+    
+    @keyframes dash {
+      0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
+      50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
+      100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
+    }
+    
+    /* 当Vue挂载后隐藏加载动画 */
+    [data-v-app] + .app-loading {
+      opacity: 0;
+      pointer-events: none;
+    }
+  </style>
+</body>
+</html>