https://blogtypecho.maxtrnn.top/categories/%E9%A1%B9%E7%9B%AE%E8%AE%B0%E5%BD%95/Recent content in 项目记录 on MaxBlogHugozh-cn<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">皖ICP备2024056272号-3</a>Thu, 24 Sep 2026 07:39:59 +0000https://blogtypecho.maxtrnn.top/post/online-travel-guide-website-z1xgwkm/Wed, 18 Dec 2024 14:29:39 +0800https://blogtypecho.maxtrnn.top/post/online-travel-guide-website-z1xgwkm/<h1 id="在线旅游攻略网站">在线旅游攻略网站</h1> <blockquote> <p>由于gitee的pr无法展示我的引述了 故修改到博客来展示了</p> </blockquote> <p><img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241218222235.png" alt="image"></p> <h1 id="更新日志">更新日志</h1> <h2 id="之前">之前</h2> <h2 id="已经完成功能">已经完成功能</h2> <ul> <li><input checked="" disabled="" type="checkbox"> 新增一些页面 和 交互</li> <li><input checked="" disabled="" type="checkbox"> 新增一些后端 API</li> <li><input checked="" disabled="" type="checkbox"> 调试大部分的的后端 API</li> </ul> <h2 id="已经完成api调试">已经完成API调试</h2> <h3 id="公开服务管理接口">公开服务管理接口</h3> <ul> <li> <p>GET <code>/api/public/services</code></p> <ul> <li>获取服务列表</li> </ul> </li> <li> <p>GET <code>/api/public/services/{id}</code></p> <ul> <li>获取服务详情</li> </ul> </li> <li> <p>GET <code>/api/public/services/{serviceId}/comments</code></p> <ul> <li>获取服务评论</li> </ul> </li> </ul> <h3 id="公开文章管理接口">公开文章管理接口</h3> <ul> <li> <p>GET <code>/api/public/posts</code></p> <ul> <li>获取所有文章</li> </ul> </li> <li> <p>GET <code>/api/public/posts/{id}</code></p> <ul> <li>获取文章详情</li> </ul> </li> <li> <p>GET <code>/api/public/posts/{postId}/comments</code></p> <ul> <li>获取文章评论</li> </ul> </li> <li> <p>GET <code>/api/public/posts/hot</code></p> <ul> <li>获取热门文章</li> </ul> </li> <li> <p>GET <code>/api/public/posts/latest</code></p> <ul> <li>获取最新文章</li> </ul> </li> <li> <p>GET <code>/api/public/posts/search</code></p> <ul> <li>搜索文章</li> </ul> </li> </ul> <h3 id="认证接口">认证接口</h3> <ul> <li> <p>POST <code>/api/auth/admin/login</code></p> <ul> <li>管理员登录</li> </ul> </li> <li> <p>POST <code>/api/auth/register</code></p> <ul> <li>用户注册</li> </ul> </li> <li> <p>POST <code>/api/auth/login</code></p> <ul> <li>用户登录</li> </ul> </li> </ul> <h3 id="用户接口">用户接口</h3> <ul> <li> <p>GET <code>/api/user/services</code></p> <ul> <li>获取服务列表</li> </ul> </li> <li> <p>GET <code>/api/user/posts/my</code></p> <ul> <li>获取我的文章</li> </ul> </li> <li> <p>GET <code>/api/user/profile</code></p> <ul> <li>获取个人资料</li> </ul> </li> </ul> <h3 id="管理员接口">管理员接口</h3> <ul> <li>GET <code>/api/admin/statistics</code> <ul> <li>获取API统计信息</li> </ul> </li> </ul> <h2 id="未来计划的">未来计划的</h2> <ul> <li>调试更多的后端 API</li> <li>与前端融合后端 API</li> <li>根据 SonarQube 优化代码 <img src="https://foruda.gitee.com/images/1734233495597491466/d082fa44_12592644.png" alt="输入图片说明" title="屏幕截图"></li> </ul> <p>其实上面的格式懒得改了 我是个懒惰的人</p>https://blogtypecho.maxtrnn.top/post/maxportal-page1-2rbpib/Sun, 01 Dec 2024 16:32:00 +0800https://blogtypecho.maxtrnn.top/post/maxportal-page1-2rbpib/<h1 id="max-门户页面-1">MAX-门户页面-1</h1> <h1 id="门户使用教程">门户使用教程</h1> <ol> <li> <p>进入门户页面：<a href="https://home.maxtral.fun/">MAX-门户-1</a></p> </li> <li> <p>点击时间是功能栏弹开<img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241202002708.png" alt="image"></p> </li> <li> <p>点击其他地方是关闭</p> </li> <li> <p>搜索框输入内容摁下回车enter或者点击搜索图标进入百度搜索<img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241202002830.png" alt="image"> ‍</p> </li> <li> <p>底下三个选择具体使用方法</p> <p><img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241202002929.png" alt="image"></p> <ul> <li>公告点击查看max发布的公告</li> <li>留言板可以选择留言内容，包括反馈建议等，需要邮箱支持，因为可以邮箱通知你谁回复你了</li> <li>计划任务，可以看见max关于中国门户网页的计划和历程</li> </ul> </li> </ol> <h1 id="更多地址教程">更多地址教程</h1> <p>2024年12月2日00:32:35 待编写</p> <p>‍</p> <p>‍</p> <p>‍</p> <p>‍</p> <p>‍</p>https://blogtypecho.maxtrnn.top/post/maxvideo-play1-4xafg/Sun, 01 Dec 2024 16:21:00 +0800https://blogtypecho.maxtrnn.top/post/maxvideo-play1-4xafg/<h1 id="max-视频播放-1">MAX-视频播放-1</h1> <blockquote> <p>视频播放平台-1，包含使用教程和源码介绍和特性的功能</p> </blockquote> <h1 id="使用教程">使用教程</h1> <ol> <li>打开页面：<a href="http://videotemp-1.maxtral.fun/index.html">MAX视频系统</a></li> <li>选择用户登录（硬要选也没办法，破解管理员也没啥意思，最多被咒骂4000+）</li> <li><img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241202000735.png" alt="image"></li> <li>选择左侧的播放列表的一个视频</li> <li><img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241202000749.png" alt="image"></li> <li>点击播放</li> <li><img src="https://picbed-max.oss-cn-wulanchabu.aliyuncs.com/siyuannote/20241202000800.png" alt="image"></li> </ol> <p>没了，这只能那么简单了，写个p的教程，that‘s it！</p> <h1 id="源码解析">源码解析</h1> <h2 id="片段1">片段1</h2> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-cmd" data-lang="cmd"><span style="display:flex;"><span>&lt;!DOCTYPE html&gt; </span></span><span style="display:flex;"><span>&lt;html lang=<span style="color:#f1fa8c">&#34;zh&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;head&gt; </span></span><span style="display:flex;"><span> &lt;meta charset=<span style="color:#f1fa8c">&#34;UTF-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;title&gt;MAX视频系统&lt;/title&gt; </span></span><span style="display:flex;"><span> &lt;style&gt; </span></span><span style="display:flex;"><span> * { </span></span><span style="display:flex;"><span> margin: 0; </span></span><span style="display:flex;"><span> padding: 0; </span></span><span style="display:flex;"><span> box-sizing: border-box; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> body { </span></span><span style="display:flex;"><span> min-height: 100vh; </span></span><span style="display:flex;"><span> font-family: -apple-system, BlinkMacSystemFont, <span style="color:#f1fa8c">&#34;Segoe UI&#34;</span>, Roboto, sans-serif; </span></span><span style="display:flex;"><span> background: url(&#39;/images/back.jpg&#39;) center/cover no-repeat fixed; </span></span><span style="display:flex;"><span> display: flex; </span></span><span style="display:flex;"><span> align-items: center; </span></span><span style="display:flex;"><span> justify-content: center; </span></span><span style="display:flex;"><span> position: relative; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> body::before { </span></span><span style="display:flex;"><span> content: &#39;&#39;; </span></span><span style="display:flex;"><span> position: absolute; </span></span><span style="display:flex;"><span> top: 0; </span></span><span style="display:flex;"><span> left: 0; </span></span><span style="display:flex;"><span> right: 0; </span></span><span style="display:flex;"><span> bottom: 0; </span></span><span style="display:flex;"><span> background: rgba(0, 0, 0, 0.5); </span></span><span style="display:flex;"><span> backdrop-filter: blur(10px); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .container { </span></span><span style="display:flex;"><span> position: relative; </span></span><span style="display:flex;"><span> text-align: center; </span></span><span style="display:flex;"><span> padding: 40px; </span></span><span style="display:flex;"><span> background: rgba(255, 255, 255, 0.9); </span></span><span style="display:flex;"><span> border-radius: 16px; </span></span><span style="display:flex;"><span> box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); </span></span><span style="display:flex;"><span> backdrop-filter: blur(5px); </span></span><span style="display:flex;"><span> max-width: 500px; </span></span><span style="display:flex;"><span> width: 90%; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .logo { </span></span><span style="display:flex;"><span> margin-bottom: 30px; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .logo h1 { </span></span><span style="display:flex;"><span> font-size: 32px; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">color</span>: #1D1D1F; </span></span><span style="display:flex;"><span> margin-bottom: 10px; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .logo p { </span></span><span style="display:flex;"><span> font-size: 16px; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">color</span>: #666; </span></span><span style="display:flex;"><span> line-height: 1.6; </span></span><span style="display:flex;"><span> margin-bottom: 40px; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .buttons { </span></span><span style="display:flex;"><span> display: flex; </span></span><span style="display:flex;"><span> gap: 20px; </span></span><span style="display:flex;"><span> justify-content: center; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .btn { </span></span><span style="display:flex;"><span> padding: 15px 40px; </span></span><span style="display:flex;"><span> border-radius: 12px; </span></span><span style="display:flex;"><span> font-size: 16px; </span></span><span style="display:flex;"><span> font-weight: 500; </span></span><span style="display:flex;"><span> text-decoration: none; </span></span><span style="display:flex;"><span> transition: all 0.3s ease; </span></span><span style="display:flex;"><span> border: none; </span></span><span style="display:flex;"><span> cursor: pointer; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .btn-primary { </span></span><span style="display:flex;"><span> background: #007AFF; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">color</span>: white; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .btn-primary:hover { </span></span><span style="display:flex;"><span> background: #0066DD; </span></span><span style="display:flex;"><span> transform: translateY(-2px); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .btn-secondary { </span></span><span style="display:flex;"><span> background: rgba(255, 255, 255, 0.8); </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">color</span>: #1D1D1F; </span></span><span style="display:flex;"><span> border: 1px solid #E5E5E5; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .btn-secondary:hover { </span></span><span style="display:flex;"><span> background: rgba(255, 255, 255, 1); </span></span><span style="display:flex;"><span> transform: translateY(-2px); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .footer { </span></span><span style="display:flex;"><span> position: absolute; </span></span><span style="display:flex;"><span> bottom: 20px; </span></span><span style="display:flex;"><span> left: 0; </span></span><span style="display:flex;"><span> right: 0; </span></span><span style="display:flex;"><span> text-align: center; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">color</span>: rgba(255, 255, 255, 0.8); </span></span><span style="display:flex;"><span> font-size: 14px; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> @media (max-width: 480px) { </span></span><span style="display:flex;"><span> .container { </span></span><span style="display:flex;"><span> padding: 30px 20px; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .buttons { </span></span><span style="display:flex;"><span> flex-direction: column; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> .btn { </span></span><span style="display:flex;"><span> width: 100%; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> &lt;/style&gt; </span></span><span style="display:flex;"><span>&lt;/head&gt; </span></span><span style="display:flex;"><span>&lt;body&gt; </span></span><span style="display:flex;"><span> &lt;div class=<span style="color:#f1fa8c">&#34;container&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;div class=<span style="color:#f1fa8c">&#34;logo&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;h1&gt;MAX视频系统&lt;/h1&gt; </span></span><span style="display:flex;"><span> &lt;p&gt;由MAX精心打造的视频管理系统&lt;br&gt;安全、稳定、高效的视频播放解决方案&lt;/p&gt; </span></span><span style="display:flex;"><span> &lt;/div&gt; </span></span><span style="display:flex;"><span> &lt;div class=<span style="color:#f1fa8c">&#34;buttons&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;a href=<span style="color:#f1fa8c">&#34;user.php&#34;</span> class=<span style="color:#f1fa8c">&#34;btn btn-primary&#34;</span>&gt;用户入口&lt;/a&gt; </span></span><span style="display:flex;"><span> &lt;a href=<span style="color:#f1fa8c">&#34;admin.php&#34;</span> class=<span style="color:#f1fa8c">&#34;btn btn-secondary&#34;</span>&gt;管理员入口&lt;/a&gt; </span></span><span style="display:flex;"><span> &lt;/div&gt; </span></span><span style="display:flex;"><span> &lt;/div&gt; </span></span><span style="display:flex;"><span> &lt;div class=<span style="color:#f1fa8c">&#34;footer&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;p&gt;© 2024 MAX视频系统 版权所有&lt;/p&gt; </span></span><span style="display:flex;"><span> &lt;/div&gt; </span></span><span style="display:flex;"><span>&lt;/body&gt; </span></span><span style="display:flex;"><span>&lt;/html&gt; </span></span></code></pre></div><h3 id="max视频系统页面设计分析">MAX视频系统页面设计分析</h3> <h4 id="页面结构概览">页面结构概览</h4> <p>在这个代码片段中，我们定义了一个简单的网页，主要用于展示 MAX 视频系统。这种设计涵盖了页面的基本骨架，包括头部、主体和底部。代码结构清晰，使用 HTML 和 CSS实现美观的用户界面。</p>https://blogtypecho.maxtrnn.top/post/172/Wed, 27 Nov 2024 10:46:00 +0800https://blogtypecho.maxtrnn.top/post/172/<h1 id="基于vue的餐饮与用户管理功能代码分析">基于Vue的餐饮与用户管理功能代码分析</h1> <h2 id="一餐饮推荐功能">一、餐饮推荐功能</h2> <p>[scode type=&ldquo;green&rdquo;]此部分代码实现了餐饮推荐相关功能，包括餐厅和菜品展示、随机推荐以及页面跳转等功能。界面布局美观，交互性较好。[/scode]</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">template</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;home-container&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;background-gradient&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;overlay&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;content-wrapper&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;header-section&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h1</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;title&#34;</span>&gt;惊喜一餐-zhn&lt;/<span style="color:#ff79c6">h1</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;divider&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">span</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;line&#34;</span>&gt;&lt;/<span style="color:#ff79c6">span</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">span</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;dot&#34;</span>&gt;&lt;/<span style="color:#ff79c6">span</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">span</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;line&#34;</span>&gt;&lt;/<span style="color:#ff79c6">span</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;subtitle&#34;</span>&gt;臻选星级美馔 · 品鉴非凡味境&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;recommendation-section&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h2</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;section-title&#34;</span>&gt;今日推荐&lt;/<span style="color:#ff79c6">h2</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-row</span> <span style="color:#50fa7b">:gutter</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;20&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-col</span> <span style="color:#50fa7b">:span</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;12&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-card</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;restaurant-card&#34;</span> <span style="color:#50fa7b">shadow</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;hover&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">template</span> #<span style="color:#50fa7b">header</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;card-header&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">span</span>&gt;精选餐厅&lt;/<span style="color:#ff79c6">span</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-button</span> <span style="color:#50fa7b">text</span> @<span style="color:#50fa7b">click</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;refreshRestaurant&#34;</span>&gt;换一个&lt;/<span style="color:#ff79c6">el-button</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">template</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-image</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">:src</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;randomRestaurant.image&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">fit</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;cover&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;restaurant-image&#34;</span> </span></span><span style="display:flex;"><span> @<span style="color:#50fa7b">click</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;goToRestaurant(randomRestaurant.id)&#34;</span> </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;restaurant-info&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h3</span>&gt;{{ randomRestaurant.name }}&lt;/<span style="color:#ff79c6">h3</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-rate</span> <span style="color:#50fa7b">v-model</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;randomRestaurant.rating&#34;</span> <span style="color:#50fa7b">disabled</span> <span style="color:#50fa7b">show-score</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;description&#34;</span>&gt;{{ randomRestaurant.description }}&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">el-card</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">el-col</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-col</span> <span style="color:#50fa7b">:span</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;12&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-card</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;dish-card&#34;</span> <span style="color:#50fa7b">shadow</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;hover&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">template</span> #<span style="color:#50fa7b">header</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;card-header&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">span</span>&gt;特色美食&lt;/<span style="color:#ff79c6">span</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-button</span> <span style="color:#50fa7b">text</span> @<span style="color:#50fa7b">click</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;refreshDish&#34;</span>&gt;换一个&lt;/<span style="color:#ff79c6">el-button</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">template</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-image</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">:src</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;randomDish.image&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">fit</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;cover&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;dish-image&#34;</span> </span></span><span style="display:flex;"><span> @<span style="color:#50fa7b">click</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;goToDish(randomDish.id)&#34;</span> </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;dish-info&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h3</span>&gt;{{ randomDish.name }}&lt;/<span style="color:#ff79c6">h3</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;restaurant-name&#34;</span>&gt;{{ randomDish.restaurantName }}&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">el-rate</span> <span style="color:#50fa7b">v-model</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;randomDish.rating&#34;</span> <span style="color:#50fa7b">disabled</span> <span style="color:#50fa7b">show-score</span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;description&#34;</span>&gt;{{ randomDish.description }}&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;price&#34;</span>&gt;¥{{ randomDish.price }}&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">el-card</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">el-col</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">el-row</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">template</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">script</span> <span style="color:#50fa7b">setup</span>&gt; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">import</span> { ref, onMounted } from <span style="color:#f1fa8c">&#39;vue&#39;</span> </span></span><span style="display:flex;"><span><span style="color:#ff79c6">import</span> { useRouter } from <span style="color:#f1fa8c">&#39;vue-router&#39;</span> </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> router <span style="color:#ff79c6">=</span> useRouter() </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> randomRestaurant <span style="color:#ff79c6">=</span> ref({}) </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> randomDish <span style="color:#ff79c6">=</span> ref({}) </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> topRestaurants <span style="color:#ff79c6">=</span> ref([ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> id<span style="color:#ff79c6">:</span> <span style="color:#bd93f9">1</span>, </span></span><span style="display:flex;"><span> name<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;星光食府&#39;</span>, </span></span><span style="display:flex;"><span> rating<span style="color:#ff79c6">:</span> <span style="color:#bd93f9">4.9</span>, </span></span><span style="display:flex;"><span> image<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;/Restaurant/Restaurant1.png&#39;</span>, </span></span><span style="display:flex;"><span> description<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;米其林三星餐厅，以创新法式料理闻名&#39;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#6272a4">// 其他餐厅数据 </span></span></span><span style="display:flex;"><span>]); </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> allDishes <span style="color:#ff79c6">=</span> [ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> id<span style="color:#ff79c6">:</span> <span style="color:#bd93f9">1</span>, </span></span><span style="display:flex;"><span> name<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;松露和牛饭&#39;</span>, </span></span><span style="display:flex;"><span> restaurantName<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;星光食府&#39;</span>, </span></span><span style="display:flex;"><span> rating<span style="color:#ff79c6">:</span> <span style="color:#bd93f9">4.9</span>, </span></span><span style="display:flex;"><span> price<span style="color:#ff79c6">:</span> <span style="color:#bd93f9">688</span>, </span></span><span style="display:flex;"><span> image<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;/foods/food1.jpg&#39;</span>, </span></span><span style="display:flex;"><span> description<span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;精选A5和牛配以黑松露，口感细腻，香气四溢&#39;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> <span style="color:#6272a4">// 其他菜品数据 </span></span></span><span style="display:flex;"><span>]; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> selectRandomRestaurant <span style="color:#ff79c6">=</span> () =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">const</span> randomIndex <span style="color:#ff79c6">=</span> <span style="color:#8be9fd;font-style:italic">Math</span>.floor(<span style="color:#8be9fd;font-style:italic">Math</span>.random() <span style="color:#ff79c6">*</span> topRestaurants.value.length) </span></span><span style="display:flex;"><span> randomRestaurant.value <span style="color:#ff79c6">=</span> topRestaurants.value[randomIndex] </span></span><span style="display:flex;"><span>}; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> selectRandomDish <span style="color:#ff79c6">=</span> () =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">const</span> randomIndex <span style="color:#ff79c6">=</span> <span style="color:#8be9fd;font-style:italic">Math</span>.floor(<span style="color:#8be9fd;font-style:italic">Math</span>.random() <span style="color:#ff79c6">*</span> allDishes.length) </span></span><span style="display:flex;"><span> randomDish.value <span style="color:#ff79c6">=</span> allDishes[randomIndex] </span></span><span style="display:flex;"><span>}; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> refreshRestaurant <span style="color:#ff79c6">=</span> () =&gt; { </span></span><span style="display:flex;"><span> selectRandomRestaurant(); </span></span><span style="display:flex;"><span>}; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> refreshDish <span style="color:#ff79c6">=</span> () =&gt; { </span></span><span style="display:flex;"><span> selectRandomDish(); </span></span><span style="display:flex;"><span>}; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> goToRestaurant <span style="color:#ff79c6">=</span> (id) =&gt; { </span></span><span style="display:flex;"><span> router.push(<span style="color:#f1fa8c">`/restaurant/</span><span style="color:#f1fa8c">${</span>id<span style="color:#f1fa8c">}</span><span style="color:#f1fa8c">`</span>); </span></span><span style="display:flex;"><span>}; </span></span><span style="display:flex;"><span><span style="color:#ff79c6">const</span> goToDish <span style="color:#ff79c6">=</span> (id) =&gt; { </span></span><span style="display:flex;"><span> router.push(<span style="color:#f1fa8c">`/dish/</span><span style="color:#f1fa8c">${</span>id<span style="color:#f1fa8c">}</span><span style="color:#f1fa8c">`</span>); </span></span><span style="display:flex;"><span>}; </span></span><span style="display:flex;"><span>onMounted(() =&gt; { </span></span><span style="display:flex;"><span> selectRandomRestaurant(); </span></span><span style="display:flex;"><span> selectRandomDish(); </span></span><span style="display:flex;"><span>}); </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">script</span>&gt; </span></span></code></pre></div><h2 id="二餐厅管理功能">二、餐厅管理功能</h2> <p>[scode type=&ldquo;green&rdquo;]这部分代码实现了餐厅管理功能，如餐厅的添加、查看、编辑和删除等操作，操作逻辑清晰。[/scode]</p>https://blogtypecho.maxtrnn.top/post/167/Wed, 13 Nov 2024 16:48:00 +0800https://blogtypecho.maxtrnn.top/post/167/<p>###我的音乐平台</p> <p>本项目是一个基于React的音乐平台，用户可以在平台上进行歌曲搜索、播放以及享受随机播放功能。平台支持歌曲的播放、暂停、切换以及持续随机播放功能，提供了简洁易用的界面和良好的用户体验。以下是平台的功能介绍和实现细节。</p> <h2 id="1-项目概述">1. 项目概述</h2> <p>我的音乐平台的核心功能是通过一个搜索框，用户可以搜索到自己喜欢的歌曲并播放。平台内置了随机播放和持续随机播放功能，能够根据用户需求实时播放热门音乐。平台的设计简洁，操作直观，用户可以通过搜索框、播放控制按钮等轻松操作。</p> <p>您可以通过以下链接访问项目：[button color=&ldquo;success&rdquo; icon=&quot;&quot; url=&ldquo;https://music.maxtral.fun/&rdquo; type=&ldquo;round&rdquo;]访问音乐平台[/button]</p> <h2 id="2-搜索功能">2. 搜索功能</h2> <p>平台的核心功能之一是歌曲搜索。用户可以通过输入歌曲名称来搜索相关的音乐，搜索结果将显示相关歌曲的列表，用户可以选择其中一首进行播放。平台会展示歌曲的名称、艺术家信息以及专辑封面等详细信息。</p> <p>[scode type=&ldquo;red&rdquo;]下一步目标：计划在搜索功能中加入更多过滤选项，允许用户按照艺术家、专辑等进行更精确的筛选。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">SearchBar</span> <span style="color:#50fa7b">onSearch</span><span style="color:#ff79c6">=</span>{handleSearch} /&gt; </span></span></code></pre></div><h2 id="3-随机播放功能">3. 随机播放功能</h2> <p>平台支持随机播放功能，用户点击“随机播放飙升音乐”按钮后，平台会自动选择一首随机的热门歌曲并开始播放。该功能帮助用户发现新歌，并能随时体验到不同风格的音乐。</p> <p>[scode type=&ldquo;blue&rdquo;]下一步目标：进一步优化随机播放逻辑，允许用户根据音乐类别、风格进行筛选，提升音乐推荐的精准度。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">onClick</span><span style="color:#ff79c6">=</span>{handleRandomPlay} <span style="color:#50fa7b">className</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;random-play-button&#34;</span>&gt; </span></span><span style="display:flex;"><span> 随机播放飙升音乐 </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span></code></pre></div><h2 id="4-持续随机播放功能">4. 持续随机播放功能</h2> <p>除了普通的随机播放外，平台还提供了持续随机播放的选项。启用此功能后，平台将在当前歌曲播放结束后自动播放下一首随机歌曲，保证用户可以不断地听到新歌，提升音乐体验。</p> <p>[scode type=&ldquo;green&rdquo;]下一步目标：实现持续随机播放的优化功能，确保无缝播放并在歌曲之间减少加载时间，提升用户的听歌体验。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">button</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">onClick</span><span style="color:#ff79c6">=</span>{handleContinuousRandomPlay} </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">className</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;continuous-random-play-button&#34;</span> </span></span><span style="display:flex;"><span>&gt; </span></span><span style="display:flex;"><span> {isContinuousRandom <span style="color:#ff79c6">?</span> <span style="color:#f1fa8c">&#39;停止持续随机播放&#39;</span> <span style="color:#ff79c6">:</span> <span style="color:#f1fa8c">&#39;持续随机播放&#39;</span>} </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span></code></pre></div><h2 id="5-播放器组件">5. 播放器组件</h2> <p>平台内的播放器组件提供了基本的播放控制功能，包括播放、暂停、上一首、下一首等操作。用户可以通过播放器随时控制音乐的播放进度，并且可以查看当前播放的歌曲信息。</p> <p>[scode type=&ldquo;blue&rdquo;]下一步目标：优化播放器界面，增加歌词显示、音量调节等功能，使其更加全面和实用。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">Player</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">song</span><span style="color:#ff79c6">=</span>{selectedSong} </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">ref</span><span style="color:#ff79c6">=</span>{audioRef} </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">onPrevious</span><span style="color:#ff79c6">=</span>{handlePrevious} </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">onNext</span><span style="color:#ff79c6">=</span>{handleNext} </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">hasPrevious</span><span style="color:#ff79c6">=</span>{currentIndex <span style="color:#ff79c6">&gt;</span> <span style="color:#bd93f9">0</span>} </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">hasNext</span><span style="color:#ff79c6">=</span>{<span style="color:#ff79c6">true</span>} // <span style="color:#50fa7b">始终显示</span>“<span style="color:#50fa7b">下一首</span>”<span style="color:#50fa7b">按钮</span> </span></span><span style="display:flex;"><span>/&gt; </span></span></code></pre></div><h2 id="6-播放列表管理">6. 播放列表管理</h2> <p>平台支持播放列表功能，每次选择歌曲播放时，平台会将该歌曲添加到播放列表中。用户可以通过控制按钮来浏览整个播放列表，切换到之前或之后的歌曲，享受更加自由的音乐播放体验。</p> <p>[scode type=&ldquo;red&rdquo;]下一步目标：在播放列表中加入歌曲删除和排序功能，让用户可以自由管理播放列表中的歌曲。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">SongList</span> <span style="color:#50fa7b">songs</span><span style="color:#ff79c6">=</span>{songs} <span style="color:#50fa7b">onSelect</span><span style="color:#ff79c6">=</span>{handleSelectSong} /&gt; </span></span></code></pre></div><h2 id="7-弹窗与交互">7. 弹窗与交互</h2> <p>为了提升用户体验，平台中的某些功能，如加载提示、错误提示等，都会使用弹窗进行展示。这些弹窗信息直接反馈给用户，帮助用户快速了解当前操作状态。</p> <h2 id="8-小结">8. 小结</h2> <p>我的音乐平台通过简洁、直观的设计提供了强大的功能，用户可以方便地进行歌曲搜索、播放，并体验到随机播放和持续随机播放等创新功能。随着平台的不断发展，我们计划在后续版本中进一步优化现有功能，增强用户的互动性和音乐体验。</p>https://blogtypecho.maxtrnn.top/post/166/Wed, 13 Nov 2024 16:39:00 +0800https://blogtypecho.maxtrnn.top/post/166/<hr> <h1 id="门户页面功能介绍">门户页面功能介绍</h1> <p>本项目的门户页面旨在提供一个简洁、互动性强的用户体验，结合了任务管理、留言板、公告等多种功能，支持实时数据展示和互动。用户可以在此页面上高效地管理自己的任务、查看公告信息以及参与留言互动。以下是对各个功能模块的详细介绍。</p> <h2 id="1-项目入口">1. 项目入口</h2> <p>门户页面作为整个项目的入口，提供了简洁的导航和清晰的布局，用户可以快速访问各项功能。您可以通过以下链接访问项目首页：[button color=&ldquo;success&rdquo; icon=&quot;&quot; url=&ldquo;https://home.maxtral.fun/&rdquo; type=&ldquo;round&rdquo;]访问首页[/button]。</p> <h2 id="2-实时时间显示">2. 实时时间显示</h2> <p>页面顶部会显示当前的时间，并每秒钟更新一次，确保用户能够随时了解时间。这一功能通过 <code>timeButton</code> 按钮呈现，用户可以点击按钮查看详细时间。</p> <p>[scode type=&ldquo;red&rdquo;]下一步，我计划在项目中进一步优化时间显示功能，考虑加入更多的时区支持，确保不同地区的用户都能看到准确的本地时间。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;timeButton&#34;</span> <span style="color:#50fa7b">onclick</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;showTime()&#34;</span>&gt;显示时间&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">p</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;timeDisplay&#34;</span>&gt;&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">script</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#8be9fd;font-style:italic">function</span> showTime() { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">const</span> date <span style="color:#ff79c6">=</span> <span style="color:#ff79c6">new</span> <span style="color:#8be9fd;font-style:italic">Date</span>(); </span></span><span style="display:flex;"><span> <span style="color:#8be9fd;font-style:italic">document</span>.getElementById(<span style="color:#f1fa8c">&#34;timeDisplay&#34;</span>).innerHTML <span style="color:#ff79c6">=</span> date.toLocaleTimeString(); </span></span><span style="display:flex;"><span> setTimeout(showTime, <span style="color:#bd93f9">1000</span>); <span style="color:#6272a4">// 每秒更新一次 </span></span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">script</span>&gt; </span></span></code></pre></div><h2 id="3-搜索功能">3. 搜索功能</h2> <p>搜索框功能允许用户在页面中进行信息查询。用户可以输入关键词进行搜索，并通过点击搜索按钮或按下 <code>Enter</code> 键进行触发。搜索结果会在新页面中展示，确保用户能够快速找到所需内容。</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">input</span> <span style="color:#50fa7b">type</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;text&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;searchInput&#34;</span> <span style="color:#50fa7b">placeholder</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;请输入搜索内容&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">onclick</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;searchContent()&#34;</span>&gt;搜索&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">script</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#8be9fd;font-style:italic">function</span> searchContent() { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">const</span> query <span style="color:#ff79c6">=</span> <span style="color:#8be9fd;font-style:italic">document</span>.getElementById(<span style="color:#f1fa8c">&#34;searchInput&#34;</span>).value; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">// 在此处可以发送搜索请求并展示结果 </span></span></span><span style="display:flex;"><span> alert(<span style="color:#f1fa8c">&#39;搜索结果: &#39;</span> <span style="color:#ff79c6">+</span> query); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">script</span>&gt; </span></span></code></pre></div><h2 id="4-任务管理">4. 任务管理</h2> <p>任务管理模块提供了任务的查看与管理功能，分为三个主要状态：待开发、开发中、已完成。每个任务都包括任务名称、描述、创建时间和更新时间等信息。任务列表会根据更新时间进行排序，确保用户能够第一时间看到最新的任务。</p> <p>[scode type=&ldquo;blue&rdquo;]下一阶段目标：我计划优化任务管理模块，加入任务排序和过滤功能，使得用户可以根据不同的需求快速找到自己关心的任务状态。[/scode]</p> <p><strong>前端代码：</strong></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;taskList&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task&#34;</span> <span style="color:#50fa7b">data-status</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;待开发&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h3</span>&gt;任务 1&lt;/<span style="color:#ff79c6">h3</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span>&gt;描述: 开发新的功能&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span>&gt;状态: 待开发&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task&#34;</span> <span style="color:#50fa7b">data-status</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;开发中&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h3</span>&gt;任务 2&lt;/<span style="color:#ff79c6">h3</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span>&gt;描述: 修复Bug&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">p</span>&gt;状态: 开发中&lt;/<span style="color:#ff79c6">p</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 更多任务 --&gt;</span> </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">script</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">const</span> tasks <span style="color:#ff79c6">=</span> <span style="color:#8be9fd;font-style:italic">document</span>.querySelectorAll(<span style="color:#f1fa8c">&#39;.task&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#6272a4">// 根据任务状态进行排序或过滤 </span></span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">script</span>&gt; </span></span></code></pre></div><h2 id="5-公告模块">5. 公告模块</h2> <p>公告模块会展示项目的最新公告信息，用户点击公告按钮后可以查看详细内容。公告内容支持简单的文本展示，并根据需要进行更新。</p>https://blogtypecho.maxtrnn.top/post/147/Wed, 06 Nov 2024 00:12:00 +0800https://blogtypecho.maxtrnn.top/post/147/<p>以下是修改后的完整博客文章，已经按照要求使用了代码格式展示代码、使用 <code>scode</code> 说明内容，并使用按钮链接格式提供项目地址：</p> <hr> <h1 id="新开了服务器并安装了新项目">新开了服务器并安装了新项目</h1> <p>近期，我新开了一个服务器，并在其上安装了两个操作系统：一个是 Windows，另一个是 Ubuntu。这个新环境为我的项目提供了更好的部署和管理空间。</p> <p><img src="https://bucket.maxtral.fun/typecho/2024/11/06/2024-11-06T08:31:13.png" alt="2024-11-06T08:31:13.png"></p> <p>之后，我计划会添加更多的项目，提升整体的功能和服务。为了更好地展示这些项目，我新建了一个门户页面。</p> <p>新的门户页面链接：<a href="https://home.maxtral.fun/">https://home.maxtral.fun/</a></p> <h2 id="说明">说明：</h2> <p>下面是当前项目中的一些关键代码：</p> <h3 id="html-结构">HTML 结构：</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#ff79c6">&lt;!DOCTYPE html&gt;</span> </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">html</span> <span style="color:#50fa7b">lang</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;zh-CN&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">head</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">meta</span> <span style="color:#50fa7b">charset</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;UTF-8&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">meta</span> <span style="color:#50fa7b">name</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;viewport&#34;</span> <span style="color:#50fa7b">content</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;width=device-width, initial-scale=1.0&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">title</span>&gt;MAX-门户-1&lt;/<span style="color:#ff79c6">title</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">link</span> <span style="color:#50fa7b">rel</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;stylesheet&#34;</span> <span style="color:#50fa7b">href</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;styles.css&#34;</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">head</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">script</span> <span style="color:#50fa7b">src</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;dist/bundle.js&#34;</span> <span style="color:#50fa7b">defer</span>&gt;&lt;/<span style="color:#ff79c6">script</span>&gt; </span></span><span style="display:flex;"><span>&lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;container&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;background&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;blurContainer&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;navigation&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;navigation&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 时间显示框 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;time-button&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;timeButton&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- JavaScript 将在此处插入当前时间 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 搜索框和搜索图标 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;search-wrapper&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">label</span> <span style="color:#50fa7b">for</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;searchInput&#34;</span>&gt;&lt;/<span style="color:#ff79c6">label</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">input</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">type</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;text&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">placeholder</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;百度搜索&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;searchInput&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;search-input&#34;</span> </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;search-icon&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;searchButton&#34;</span>&gt;&amp;#128269;&lt;/<span style="color:#ff79c6">button</span>&gt; <span style="color:#6272a4">&lt;!-- 搜索图标按钮 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 公告弹窗 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;popup-content&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;announcementPopup&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;close-button&#34;</span> <span style="color:#50fa7b">data-popup</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;announcementPopup&#34;</span>&gt;关闭&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;announcement-content&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 公告内容将通过 JavaScript 从 announcement.txt 加载 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 留言板弹窗 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;popup-content&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;commentPopup&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;close-button&#34;</span> <span style="color:#50fa7b">data-popup</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;commentPopup&#34;</span>&gt;关闭&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h3</span>&gt;留言板&lt;/<span style="color:#ff79c6">h3</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 留言表单 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;message-form&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;input-group&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">label</span> <span style="color:#50fa7b">for</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;nickname&#34;</span>&gt;昵称&lt;/<span style="color:#ff79c6">label</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">input</span> <span style="color:#50fa7b">type</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;text&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;nickname&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;input&#34;</span> <span style="color:#50fa7b">placeholder</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;请输入你的昵称&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;nicknameError&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;error&#34;</span>&gt;请输入昵称&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;input-group&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">label</span> <span style="color:#50fa7b">for</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;newMessage&#34;</span>&gt;留言内容&lt;/<span style="color:#ff79c6">label</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">textarea</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;newMessage&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;textarea&#34;</span> <span style="color:#50fa7b">placeholder</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;写下你的留言...&#34;</span>&gt;&lt;/<span style="color:#ff79c6">textarea</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;messageError&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;error&#34;</span>&gt;请输入留言内容&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;button-container&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;button submit-message-button&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">svg</span> <span style="color:#50fa7b">width</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;16&#34;</span> <span style="color:#50fa7b">height</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;16&#34;</span> <span style="color:#50fa7b">viewBox</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;0 0 24 24&#34;</span> <span style="color:#50fa7b">fill</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;none&#34;</span> <span style="color:#50fa7b">stroke</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;currentColor&#34;</span> <span style="color:#50fa7b">stroke-width</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;2&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">path</span> <span style="color:#50fa7b">d</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z&#34;</span>&gt;&lt;/<span style="color:#ff79c6">path</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">svg</span>&gt; </span></span><span style="display:flex;"><span> 发布留言 </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 留言列表 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;messageList&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;message-list&#34;</span>&gt; </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- Messages will be inserted here --&gt;</span> </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 计划任务弹窗 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;popup-content&#34;</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;taskPopup&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;close-button&#34;</span> <span style="color:#50fa7b">data-popup</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;taskPopup&#34;</span>&gt;关闭&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h3</span>&gt;计划任务管理&lt;/<span style="color:#ff79c6">h3</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 任务表单已移除，游客无法添加任务 --&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#6272a4">&lt;!-- 折叠任务区块 --&gt;</span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task-section&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h2</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;section-title&#34;</span>&gt;待开发任务&lt;/<span style="color:#ff79c6">h2</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;toggle-button&#34;</span> <span style="color:#50fa7b">data-section</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;pendingTasks&#34;</span>&gt;展开&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;pendingTasks&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task-list collapsed&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task-section&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h2</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;section-title&#34;</span>&gt;开发中任务&lt;/<span style="color:#ff79c6">h2</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;toggle-button&#34;</span> <span style="color:#50fa7b">data-section</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;inProgressTasks&#34;</span>&gt;展开&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;inProgressTasks&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task-list collapsed&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task-section&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">h2</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;section-title&#34;</span>&gt;已完成任务&lt;/<span style="color:#ff79c6">h2</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">button</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;toggle-button&#34;</span> <span style="color:#50fa7b">data-section</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;completedTasks&#34;</span>&gt;展开&lt;/<span style="color:#ff79c6">button</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#ff79c6">div</span> <span style="color:#50fa7b">id</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;completedTasks&#34;</span> <span style="color:#50fa7b">class</span><span style="color:#ff79c6">=</span><span style="color:#f1fa8c">&#34;task-list collapsed&#34;</span>&gt;&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">div</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">body</span>&gt; </span></span><span style="display:flex;"><span>&lt;/<span style="color:#ff79c6">html</span>&gt; </span></span></code></pre></div><h3 id="样式表css">样式表（CSS）：</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#6272a4">/* 基础样式 */</span> </span></span><span style="display:flex;"><span><span style="color:#ff79c6">body</span><span style="color:#ff79c6">,</span> <span style="color:#ff79c6">html</span> { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">margin</span>: <span style="color:#bd93f9">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">padding</span>: <span style="color:#bd93f9">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">width</span>: <span style="color:#bd93f9">100</span><span style="color:#8be9fd">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">height</span>: <span style="color:#bd93f9">100</span><span style="color:#8be9fd">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">font-family</span>: Arial, <span style="color:#ff79c6">sans-serif</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#50fa7b">container</span> { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">display</span>: <span style="color:#ff79c6">flex</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">flex-direction</span>: <span style="color:#ff79c6">column</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">align-items</span>: <span style="color:#ff79c6">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">justify-content</span>: <span style="color:#ff79c6">flex-start</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">height</span>: <span style="color:#bd93f9">100</span><span style="color:#8be9fd">vh</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">position</span>: <span style="color:#ff79c6">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">padding-top</span>: <span style="color:#bd93f9">10</span><span style="color:#8be9fd">vh</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#50fa7b">background</span> { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">position</span>: <span style="color:#ff79c6">absolute</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">inset</span>: <span style="color:#bd93f9">0</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">background-image</span>: <span style="color:#8be9fd;font-style:italic">url</span>(<span style="color:#f1fa8c">&#39;backgrand.jpg&#39;</span>); </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">background-size</span>: <span style="color:#ff79c6">cover</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">background-position</span>: <span style="color:#ff79c6">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">transition</span>: <span style="color:#ff79c6">all</span> <span style="color:#bd93f9">0.5</span><span style="color:#8be9fd">s</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">filter</span>: <span style="color:#8be9fd;font-style:italic">blur</span>(<span style="color:#bd93f9">0</span>) <span style="color:#8be9fd;font-style:italic">brightness</span>(<span style="color:#bd93f9">100</span><span style="color:#8be9fd">%</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#50fa7b">background</span>.<span style="color:#50fa7b">active</span> { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">filter</span>: <span style="color:#8be9fd;font-style:italic">blur</span>(<span style="color:#bd93f9">4</span><span style="color:#8be9fd">px</span>) <span style="color:#8be9fd;font-style:italic">brightness</span>(<span style="color:#bd93f9">75</span><span style="color:#8be9fd">%</span>); </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#50fa7b">navigation</span> { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">display</span>: <span style="color:#ff79c6">flex</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">flex-direction</span>: <span style="color:#ff79c6">column</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">align-items</span>: <span style="color:#ff79c6">center</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">gap</span>: <span style="color:#bd93f9">5</span><span style="color:#8be9fd">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">position</span>: <span style="color:#ff79c6">relative</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">z-index</span>: <span style="color:#bd93f9">10</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">width</span>: <span style="color:#bd93f9">100</span><span style="color:#8be9fd">%</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">max-width</span>: <span style="color:#bd93f9">64</span><span style="color:#8be9fd">rem</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#6272a4">/* 时间按钮样式 */</span> </span></span><span style="display:flex;"><span>.<span style="color:#50fa7b">time-button</span> { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">font-size</span>: <span style="color:#bd93f9">2</span><span style="color:#8be9fd">rem</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">color</span>: <span style="color:#ff79c6">white</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">background</span>: <span style="color:#bd93f9">#216b94</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">border</span>: <span style="color:#ff79c6">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">border-radius</span>: <span style="color:#bd93f9">10</span><span style="color:#8be9fd">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">outline</span>: <span style="color:#ff79c6">none</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">cursor</span>: <span style="color:#ff79c6">default</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">user-select</span>: <span style="color:#ff79c6">none</span>; </span></span><span style="display:flex;"><span> pointer-events: <span style="color:#ff79c6">auto</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">padding</span>: <span style="color:#bd93f9">10</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">20</span><span style="color:#8be9fd">px</span>; </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">box-shadow</span>: <span style="color:#bd93f9">5</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">5</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">15</span><span style="color:#8be9fd">px</span> <span style="color:#8be9fd;font-style:italic">rgba</span>(<span style="color:#bd93f9">0</span>, <span style="color:#bd93f9">0</span>, <span style="color:#bd93f9">0</span>, <span style="color:#bd93f9">0.2</span>), </span></span><span style="display:flex;"><span> <span style="color:#bd93f9">-5</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">-5</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">15</span><span style="color:#8be9fd">px</span> <span style="color:#8be9fd;font-style:italic">rgba</span>(<span style="color:#bd93f9">255</span>, <span style="color:#bd93f9">255</span>, <span style="color:#bd93f9">255</span>, <span style="color:#bd93f9">0.3</span>); </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">transition</span>: <span style="color:#ff79c6">all</span> <span style="color:#bd93f9">0.3</span><span style="color:#8be9fd">s</span> <span style="color:#ff79c6">ease</span>; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span>.<span style="color:#50fa7b">time-button</span>:hover { </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">box-shadow</span>: <span style="color:#bd93f9">2</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">2</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">10</span><span style="color:#8be9fd">px</span> <span style="color:#8be9fd;font-style:italic">rgba</span>(<span style="color:#bd93f9">0</span>, <span style="color:#bd93f9">0</span>, <span style="color:#bd93f9">0</span>, <span style="color:#bd93f9">0.3</span>), </span></span><span style="display:flex;"><span> <span style="color:#bd93f9">-2</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">-2</span><span style="color:#8be9fd">px</span> <span style="color:#bd93f9">10</span><span style="color:#8be9fd">px</span> <span style="color:#8be9fd;font-style:italic">rgba</span>(<span style="color:#bd93f9">255</span>, <span style="color:#bd93f9">255</span>, <span style="color:#bd93f9">255</span>, <span style="color:#bd93f9">0.4</span>); </span></span><span style="display:flex;"><span> <span style="color:#ff79c6">transform</span>: <span style="color:#8be9fd;font-style:italic">translateY</span>(<span style="color:#bd93f9">-2</span><span style="color:#8be9fd">px</span>) <span style="color:#8be9fd;font-style:italic">scale</span>(<span style="color:#bd93f9">1.05</span>); </span></span><span style="display:flex;"><span>} </span></span></code></pre></div><h3 id="项目地址">项目地址：</h3> <h2 id="2024-11-13t162053png">[button color=&ldquo;success&rdquo; icon=&quot;&quot; url=&ldquo;https://home.maxtral.fun/&rdquo; type=&ldquo;round&rdquo;]体验地址[/button] <img src="https://bucket.maxtral.fun/typecho/2024/11/14/2024-11-13T16:20:53.png" alt="2024-11-13T16:20:53.png"></h2> <p>新的状态页面：[button color=&ldquo;success&rdquo; icon=&quot;&quot; url=&ldquo;http://nezha.maxtral.fun/&rdquo; type=&ldquo;round&rdquo;]状态页面[/button] <img src="https://bucket.maxtral.fun/typecho/2024/11/14/2024-11-13T16:21:43.png" alt="2024-11-13T16:21:43.png"> 哪吒面板是一个开源、轻量、易用的服务器监控与运维工具。以下是<strong>哪吒面板的Docker安装代码</strong>：</p>https://blogtypecho.maxtrnn.top/post/79/Mon, 14 Oct 2024 04:46:00 +0800https://blogtypecho.maxtrnn.top/post/79/<hr> <p>2024年10月14日12:28:28</p> <hr> <p>项目名称：校园淘淘**（暂时拟定）** 项目logo：<img src="https://blogtypecho.maxtrnn.top/uploads/2024/10/2270681621.png" alt="2024-10-14T04:29:19.png"> <strong>（暂时设计的）</strong></p> <p>开发背景： [scode type=&ldquo;green&rdquo;] 您是否经常买一些二手物品？比如咸鱼这种平台。但是小区域，比如一个校园用咸鱼的平台明显过于繁琐。 您是否购买过校园内的二手物品？ 在哪里获取到的信息呢？ 贴吧，qq群，别人宣传。。。。您是否感到有事买不到一些产品，搜索卖家费劲，qq群人数限制等 为此我们选择开发此项目:一个校园的二手交易平台[/scode] [scode type=&ldquo;lblue&rdquo;]项目介绍：本项目旨在实现安卓app，微信小程序，qq群群聊三个平台的实时校园二手交易平台，满足校园 内的学生的二手交易，达到便捷，靠谱，资源广的产品理念。[/scode] <em>（2024年10月14日12:36:30待编写）</em> <br> [scode type=&ldquo;red&rdquo;]产品功能（预计实现）：单独学校的独立运行，独立的交易平台，适用于不同学校。 学号+实名信息 绑定注册，确保信息真实可靠。 卖家买家信誉系统，以及线上线下的交易方式保证交易的可靠真实。 商品的发布，搜索，分类，评论留言 。 讨论论坛，帖子公告之类。 订单的创建，商家卖家的多平台提醒：QQ，短信，微信，小程序。以及手动拨打号码等 个人信息的展示，隐私信息的保密，安全设置等。</p> <p><em>上述功能只为大概意思，具体实现以项目进度为准</em>[/scode]</p> <p><strong>本项目由22级软件工程&ndash;张贺楠发布，若咨询更多信息请联系我：</strong></p> <p>[collapse status=&ldquo;ture&rdquo; title=&ldquo;联系max&rdquo;] qq：2577870094 email：2577870094@qq.com[/collapse]</p>https://blogtypecho.maxtrnn.top/post/77/Sat, 12 Oct 2024 15:11:00 +0800https://blogtypecho.maxtrnn.top/post/77/<hr> <h2 id="校园淘淘的由来">校园淘淘的由来</h2> <p>2024年10月12日23:08:40 打算改版原来的社区团购为校园交易平台 实现校园二手交易，名为校园淘淘，同步上线安卓app，微信小程序，qq群的一键发布的三个平台 具体功能仍在构思&hellip;.</p> <hr> <p>2024年10月12日23:11:19</p>https://blogtypecho.maxtrnn.top/post/47/Sat, 07 Sep 2024 17:52:00 +0800https://blogtypecho.maxtrnn.top/post/47/<h2 id="使用手册">使用手册</h2> <p>可以一键式注册账号登录，天气要使用区域编号即可食用，邮件推送要输入开放imap的邮箱地址，邮箱账号和密码(软件不做存储）,最后是qmsg的配置 [button color=&ldquo;info&rdquo; icon=&quot;&quot; url=&ldquo;https://github.com/itmanmax/MAXTR-Plugins&rdquo; type=&ldquo;round&rdquo;]自动邮箱插件地址[/button] [button color=&ldquo;success&rdquo; icon=&quot;&quot; url=&ldquo;https://github.com/itmanmax/MAXTR-Plugins&rdquo; type=&ldquo;round&rdquo;]qmsg官方文档[/button]</p> <h2 id="须知">须知</h2> <p>请不要恶意注册账号以及频繁使用一些功能</p> <h2 id="感谢">感谢</h2> <p>max</p>https://blogtypecho.maxtrnn.top/post/41/Sun, 01 Sep 2024 17:17:00 +0800https://blogtypecho.maxtrnn.top/post/41/<h2 id="需要手动导入自己的课表信息">需要手动导入自己的课表信息</h2> <p>找个定时软件按时户动pY脚本，这个也是 qmsg推送服务，哈哈，可以看的出，我好多都用它了，其是还是方便，Wechat的有限制，所以还是qmsg的好 具体地址：[button color=&ldquo;primary&rdquo; icon=&quot;&quot; url=&ldquo;https://github.com/itmanmax/MAXTR-Plugins&rdquo; type=&quot;&quot;]github链接[/button] [scode type=&ldquo;green&rdquo;]import datetime import requests</p> <h1 id="qmsg-发送函数">Qmsg 发送函数</h1> <p>def send_qmsg通知(qmsg_key, qq_number, msg): postdata = { &lsquo;msg&rsquo;: msg, &lsquo;qq&rsquo;: qq_number } response = requests.post(f&rsquo;<a href="https://qmsg.zendee.cn/send/%7Bqmsg_key%7D'">https://qmsg.zendee.cn/send/{qmsg_key}'</a>, data=postdata) if response.status_code == 200: print(&ldquo;通知已发送到QQ。&rdquo;) else: print(f&quot;通知发送失败，错误码：{response.status_code}，响应内容：{response.text}&quot;)</p> <h1 id="课程表和时间段信息">课程表和时间段信息</h1> <p>course_schedule = { 1: [(&ldquo;编译原理&rdquo;, &ldquo;第一节<del>第二节&rdquo;, &ldquo;3号楼2030202&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;编译原理实验&rdquo;, &ldquo;第三节<del>第四节&rdquo;, &ldquo;6号楼2060302&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;人工智能&rdquo;, &ldquo;第六节<del>第八节&rdquo;, &ldquo;3号楼2030202&rdquo;, &ldquo;1</del>15周&rdquo;), (&ldquo;人工智能&rdquo;, &ldquo;第九节<del>第十节&rdquo;, &ldquo;6号楼2060302&rdquo;, &ldquo;4</del>12周&rdquo;)], 2: [(&ldquo;软件设计与体系结构实验&rdquo;, &ldquo;第九节<del>第十节&rdquo;, &ldquo;6号楼2060302&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;软件设计与体系结构&rdquo;, &ldquo;第六节<del>第八节&rdquo;, &ldquo;3号楼2030202&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;软件需求分析与建模&rdquo;, &ldquo;第三节<del>第五节&rdquo;, &ldquo;3号楼2030202,6号楼2060302&rdquo;, &ldquo;1</del>18周&rdquo;)], 3: [(&ldquo;计算机网络&rdquo;, &ldquo;第三节<del>第四节&rdquo;, &ldquo;3号楼2030203&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;软件应用开发实践&rdquo;, &ldquo;第一节<del>第二节&rdquo;, &ldquo;6号楼2060302&rdquo;, &ldquo;1</del>18周&rdquo;)], 4: [(&ldquo;音乐鉴赏&rdquo;, &ldquo;第九节<del>第十节&rdquo;, &ldquo;1号楼2010404&rdquo;, &ldquo;1</del>9周&rdquo;), (&ldquo;经济学原理&rdquo;, &ldquo;第六节<del>第七节&rdquo;, &ldquo;1号楼2010501&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;计算机网络实验&rdquo;, &ldquo;第三节<del>第四节&rdquo;, &ldquo;6号楼2060201&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;计算机网络&rdquo;, &ldquo;第一节<del>第二节&rdquo;, &ldquo;3号楼2030203&rdquo;, &ldquo;1</del>18周&rdquo;)], 5: [(&ldquo;人机界面设计&rdquo;, &ldquo;第三节<del>第五节&rdquo;, &ldquo;2号楼2020103,6号楼2060101&rdquo;, &ldquo;1</del>18周&rdquo;), (&ldquo;大学生职业生涯规划与就业指导（III）&rdquo;, &ldquo;第一节<del>第二节&rdquo;, &ldquo;1号楼2010506&rdquo;, &ldquo;10</del>18周&rdquo;)], 6: [], # 周六无课程 7: [] # 周日无课程 }</p>https://blogtypecho.maxtrnn.top/post/27/Fri, 30 Aug 2024 00:23:00 +0800https://blogtypecho.maxtrnn.top/post/27/<p>###目前v1.0正式版###</p> <p>###操作手册暂时未推出### [button color=&ldquo;success&rdquo; icon=&quot;&quot; url=&ldquo;https://gitee.com/wudimax/android-life-assistant&rdquo; type=&ldquo;round&rdquo;]gitee下载链接[/button]</p> <hr> <h2 id="2024年8月30日171222">2024年8月30日17:12:22</h2> <p>[scode type=&ldquo;green&rdquo;]结果：完成第一个小功能，目前服务器连接正常，可以在线聊天，正常打开页面，流程运行[/scode] [scode type=&ldquo;lblue&rdquo;]过程：网上的XX教程，弄半天接故事Rds数据库的服务器的源码，我弄半天，改到半夜4点！因为第二天就要交作业，无语&hellip;. 自己和gpt结合写的剩余页面，除了聊天功能，还是比较繁琐的，弄了好长时间[/scode] [scode type=&ldquo;red&rdquo;]下一阶段目标：更多的功能，比如前几天写的自动qq通知新邮件之类（目前没单独写这篇文章），web api调用接口（目前还是本地ssh）等[/scode]</p> <hr> <h2 id="2024年8月31日205317">2024年8月31日20:53:17</h2> <p>[scode type=&ldquo;green&rdquo;]结果：完成两个个小功能，可以检查新邮件推送至QQ，输入城市天气编号查询天气，正常打开页面，流程运行[/scode] [scode type=&ldquo;lblue&rdquo;]过程：还是比较费劲的，因为gpt也不完全智能，嘻嘻，报错什么的多的是，离谱的是我的垃圾电脑卡死机好多次，无语，这个软件太迟cpu了[/scode] [scode type=&ldquo;red&rdquo;]下一阶段目标：web api调用接口（目前还是本地ssh，我是真的想改）等，更多有用的功能[/scode]</p> <hr> <h2 id="2024年9月8日011458">2024年9月8日01:14:58</h2> <p>[scode type=&ldquo;green&rdquo;]结果：完成诸多功能，健康查询和健康tips，日程管理，注册账号，实现api调取数据，正常打开页面，流程运行[/scode] [scode type=&ldquo;lblue&rdquo;]过程：写了一周，来回删改调试，也是不得了，我的安卓手机还是平板，耽误不少时间[/scode] [scode type=&ldquo;red&rdquo;]下一阶段目标：改ui，限制手机号注册，更多有用的功能[/scode]</p> <pre><code>请输入代码 </code></pre>