chenzhilong/TenantDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加获取CNB网址的工具函数，更新主程序以打印运行网址，新增requirements.txt文件，优化前端页面布局和样式，增加移动端菜单功能。

Browse Source
This commit is contained in:
dockermen
2025-04-09 13:04:29 +08:00
parent c6034b8154
commit 7b482b1ef0
5 changed files with 170 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
templates/index.html
View File

@ -6,27 +6,115 @@
<title>Vite + Vue</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
<!-- 引入Vue.js -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入Element UI的样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!-- 引入Vue.js框架 -->
<!--<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
<!-- 引入Element UI组件库的样式文件 -->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />-->
</head>
<body>
<nav class="bg-gray-500 p-4 fixed top-0 left-0 right-0 z-10">
<nav class="bg-gray-500 h-16 fixed top-0 left-0 right-0 z-10 flex items-center">
<div class="container mx-auto flex justify-between items-center">
<!-- 网站标题区域：白色粗体文本，字体大小为xl -->
<div class="text-white font-bold text-xl">网站名称</div>
<div class="hidden md:flex space-x-6">
<!-- 导航菜单容器：在移动设备上隐藏(hidden)，在中等尺寸(md)以上的屏幕显示为flex布局
space-x-6表示子元素之间的水平间距为6个单位 -->
<div class="hidden md:flex md:space-x-6">
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>首页
</a>
<a href="#" class="text-white hover:text-gray-300 transition duration-300">产品</a>
<a href="#" class="text-white hover:text-gray-300 transition duration-300">服务</a>
<a href="#" class="text-white hover:text-gray-300 transition duration-300">关于我们</a>
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
</svg>产品
</a>
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>服务
</a>
<a href="#" class="text-white hover:text-gray-300 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>关于我们
</a>
<a href="#" class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 text-white hover:text-gray-300 transition duration-300">联系我们</a>
</div>
<!-- 移动端菜单按钮 -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- 移动端侧边菜单 -->
<div id="mobile-menu" class="fixed top-0 right-0 w-64 h-full bg-gray-800 transform translate-x-full transition-transform duration-300 ease-in-out z-20">
<div class="p-4 border-b border-gray-700">
<div class="flex justify-between items-center">
<span class="text-white font-bold">菜单</span>
<button id="close-menu-button" class="text-white focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<div class="py-4">
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>首页
</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
</svg>产品
</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>服务
</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-gray-700 transition duration-300 flex items-center">
<svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>关于我们
</a>
<a href="#" class="block px-4 py-2 bg-gradient-to-r from-indigo-600 to-pink-500 text-white hover:bg-gray-700 transition duration-300">联系我们</a>
</div>
</div>
<!-- 遮罩层 -->
<div id="overlay" class="fixed inset-0 bg-black opacity-50 z-10 hidden"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const closeMenuButton = document.getElementById('close-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const overlay = document.getElementById('overlay');
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.remove('translate-x-full');
overlay.classList.remove('hidden');
});
closeMenuButton.addEventListener('click', function() {
mobileMenu.classList.add('translate-x-full');
overlay.classList.add('hidden');
});
overlay.addEventListener('click', function() {
mobileMenu.classList.add('translate-x-full');
overlay.classList.add('hidden');
});
});
</script>
</div>
</nav>
<div class="container mx-auto flex justify-center items-center h-screen p-5 overflow-hidden">
@ -51,13 +139,28 @@
</div>
<div id="debug-output" style="position: fixed; bottom: 0px;"></div>
</div>
<footer class="bg-gray-800 text-white py-2 mt-10 fixed bottom-0 w-full">
<div class="container mx-auto px-4">
<div class="flex flex-col justify-center items-center">
<div class="mb-4 text-center flex flex-row justify-center items-center">
<p class="text-xs font-bold mt-2 mr-2">网站名称</p>
<p class="text-xs text-gray-400 mt-2">© 2023 版权所有</p>
</div>
<div class="flex flex-row justify-center space-x-6">
<a href="#" class="text-xs text-gray-300 hover:text-white transition duration-300">隐私政策</a>
<a href="#" class="text-xs text-gray-300 hover:text-white transition duration-300">使用条款</a>
<a href="#" class="text-xs text-gray-300 hover:text-white transition duration-300">联系我们</a>
</div>
</div>
</div>
</footer>
<!-- 引入Element UI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script src="static/js/app.js"></script>
<script>
var vConsole = new window.VConsole();
//重定向console输出到我们的容器
//将控制台输出重定向到我们的调试容器
vConsole.execInContext(document.getElementById('debug-output'));
</script>
</body>