feat: 文案更新

web/src/components/plus-table.vue

@@ -52,20 +52,24 @@
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>EasyNode</strong>最初是一个简单的Web终端工具，随着用户群的不断扩大，功能需求也日益增长，为了实现大家的功能需求，我投入了大量的业余时间进行开发和维护。
           一直在为爱发电，渐渐的也没了开发的动力。
           <br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了项目的可持续发展，<strong>后续</strong>版本开始推出<strong>PLUS</strong>版本，后续特性功能开发也会优先在<strong>PLUS</strong>版本中实现，但即使不升级到<strong>PLUS</strong>，也不会影响到<strong>EasyNode</strong>的基础功能使用【注意:
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了项目的可持续发展，<strong>后续</strong>版本开始推出<strong>PLUS</strong>版本。后续特性功能开发也会优先在<strong>PLUS</strong>版本中实现，但即使不升级到<strong>PLUS</strong>，也不会影响到<strong>EasyNode</strong>的基础功能使用【注意:
           暂不支持纯内网用户激活PLUS功能】。
           <br>
-          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="text-decoration: underline;">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          注意：激活码只为激活面板<strong>PLUS</strong>功能使用，不作其他用途。您获取的激活码仅限本人使用，任何分享他人的行为都有可能导致激活码&服务器IP被永久封禁。
+          <br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <span style="text-decoration: underline;">
             为了感谢前期赞赏过的用户, 在<strong>PLUS</strong>功能正式发布前，所有进行过赞赏的用户，无论金额大小，均可联系作者TG: <a
-class="link"
+              class="link"
               href="https://t.me/chaoszhu"
-target="_blank"
->@chaoszhu</a> 凭打赏记录免费获取永久<strong>PLUS</strong>授权码。
+              target="_blank"
+            >@chaoszhu</a> 凭打赏记录免费获取永久<strong>PLUS</strong>授权码。
           </span>
         </p>
         <div class="about_footer">
           <el-button type="info" @click="plusTipsShow = false">关闭</el-button>
-          <el-button type="primary" @click="handlePlusSupport">购买Plus Key</el-button>
+          <el-button type="primary" @click="handlePlusSupport">获取Plus Key</el-button>
         </div>
       </div>
     </el-dialog>

web/src/views/login/index.vue

@@ -77,12 +77,14 @@
         </el-button>
       </div>
     </div>
+    <Warn />
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
 import { RSAEncrypt, jwtExpireToTimestamp } from '@utils/index.js'
+import Warn from './warn.vue'
 import { version } from '../../../package.json'
 
 const { proxy: { $store, $api, $message, $router, $messageBox } } = getCurrentInstance()

web/src/views/login/warn.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="安全使用须知"
+    width="550px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @closed="handleClosed"
+  >
+    <div class="warn-content">
+      <ol>
+        <li>
+          1. 如果你的服务器有<span class="highlight">非常重要的数据</span>，请谨慎在公网暴露此面板。
+        </li>
+        <li>
+          2. 善用面板提供的<span class="highlight">双重认证</span>与<span class="highlight">IP白名单</span>功能，提升面板安全性。
+        </li>
+        <li>
+          3. <span class="highlight">不要安装来源不明的浏览器插件或者油猴脚本</span>，以防止鉴权Token泄露。
+        </li>
+        <li>
+          4. 在公网<span class="highlight">不套用https使用此面板</span>可能会导致你的鉴权token泄露。
+        </li>
+        <li>
+          5. <span class="highlight">及时更新面板</span>，以防止底层依赖的组件具有安全漏洞或者面板自身服务漏洞。
+        </li>
+        <li>
+          6. 功能更新或安全信息及时通知请订阅TG频道: <span class="point" @click="subTg">点击订阅</span>。
+        </li>
+      </ol>
+    </div>
+    <template #footer>
+      <el-button type="primary" @click="handleConfirm">
+        我已知晓
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const WARN_STORAGE_KEY = 'easynode_warn_shown'
+
+const visible = ref(false)
+
+const handleConfirm = () => {
+  localStorage.setItem(WARN_STORAGE_KEY, 'true')
+  visible.value = false
+}
+
+const subTg = () => {
+  window.open('https://t.me/easynode_notify', '_blank')
+}
+
+const handleClosed = () => {
+  // 弹窗关闭后的回调
+}
+
+onMounted(() => {
+  const hasShown = localStorage.getItem(WARN_STORAGE_KEY)
+  if (!hasShown) {
+    visible.value = true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.warn-content {
+  ol {
+    padding-left: 20px;
+    margin: 0;
+
+    li {
+      line-height: 2;
+      margin-bottom: 8px;
+      color: #606266;
+
+      .highlight {
+        color: #e6a23c;
+        font-weight: 600;
+      }
+      .point {
+        color: #409eff;
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+:deep(.el-dialog__header) {
+  .el-dialog__title {
+    color: #e6a23c;
+    font-weight: 600;
+  }
+}
+</style>