stylus 语法换成 saas 语法全部完成

web/src/views/Index.vue

@@ -78,6 +78,19 @@
     </div>
 
     <footer-bar />
+
+    <!-- 网站公告对话框 -->
+    <el-dialog v-model="showNotice" :show-close="true" class="notice-dialog" title="网站公告">
+      <div class="notice">
+        <div v-html="notice"></div>
+      </div>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="notShow" type="primary">我知道了，不再显示</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -88,6 +101,8 @@ import { checkSession, getLicenseInfo, getSystemInfo } from '@/store/cache'
 import { removeUserToken } from '@/store/session'
 import { httpGet } from '@/utils/http'
 import { ElMessage } from 'element-plus'
+import MarkdownIt from 'markdown-it'
+import emoji from 'markdown-it-emoji'
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -103,6 +118,19 @@ const githubURL = ref(import.meta.env.VITE_GITHUB_URL)
 const giteeURL = ref(import.meta.env.VITE_GITEE_URL)
 const navs = ref([])
 
+// 公告相关变量
+const showNotice = ref(false)
+const notice = ref('')
+const noticeKey = ref('SYSTEM_NOTICE')
+
+// Markdown 解析器
+const md = new MarkdownIt({
+  breaks: true,
+  html: true,
+  linkify: true,
+  typographer: true,
+}).use(emoji)
+
 onMounted(() => {
   getSystemInfo()
     .then((res) => {
@@ -135,14 +163,68 @@ onMounted(() => {
       isLogin.value = true
     })
     .catch(() => {})
+
+  // 获取系统公告
+  httpGet('/api/config/get?key=notice')
+    .then((res) => {
+      try {
+        notice.value = md.render(res.data['content'])
+        const oldNotice = localStorage.getItem(noticeKey.value)
+        // 如果公告有更新，则显示公告
+        if (oldNotice !== notice.value && notice.value.length > 10) {
+          showNotice.value = true
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+    })
+    .catch((e) => {
+      ElMessage.error('获取系统配置失败：' + e.message)
+    })
 })
 
 const logout = () => {
   removeUserToken()
   router.push('/login')
 }
+
+// 不再显示公告
+const notShow = () => {
+  localStorage.setItem(noticeKey.value, notice.value)
+  showNotice.value = false
+}
 </script>
 
 <style lang="scss" scoped>
 @use '../assets/css/index.scss' as *;
 </style>
+
+<style lang="scss">
+.notice-dialog {
+  .el-dialog__header {
+    padding-bottom: 0;
+  }
+
+  .el-dialog__body {
+    padding: 0 20px;
+
+    h2 {
+      margin: 20px 0 15px 0;
+    }
+
+    ol,
+    ul {
+      padding-left: 10px;
+    }
+
+    ol {
+      list-style: decimal-leading-zero;
+      padding-left: 20px;
+    }
+
+    ul {
+      list-style: inside;
+    }
+  }
+}
+</style>