页面管理

页面功能支持通过 Vue SFC 动态编译生成 Web 页面，可快速构建管理界面、数据展示页面等。

页面类型

类型	说明
Vue SFC	Vue 3 单文件组件，动态编译运行
HTML	原生 HTML 页面
iframe	嵌入外部页面

Vue SFC 页面

Vue SFC 页面使用 Vue 3 语法编写，支持 <template>、<script>、<style> 三段式结构：

<template>
  <div class="container">
    <el-table :data="tableData" border>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="email" label="邮箱" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tableData = ref([])

onMounted(async () => {
  const res = await fetch('/sss/api/users/list', {
    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
  })
  const data = await res.json()
  tableData.value = data.data || []
})
</script>

<style scoped>
.container { padding: 20px; }
</style>

可用依赖

Vue SFC 页面中可直接使用以下库：

库	说明
Vue 3	前端框架
Element Plus	UI 组件库
axios	HTTP 客户端

HTML 页面

直接编写 HTML 内容，支持内联 CSS 和 JavaScript：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; }
  </style>
</head>
<body>
  <h1>数据报表</h1>
  <div id="content"></div>
  <script>
    fetch('/sss/api/report/data')
      .then(r => r.json())
      .then(data => {
        document.getElementById('content').innerText = JSON.stringify(data)
      })
  </script>
</body>
</html>

iframe 嵌入

嵌入外部网页，只需填写目标 URL：

https://example.com/dashboard

页面路由与访问

页面创建后，可通过以下方式访问：

• 页面预览：在编辑页面点击「预览」按钮
• URL 访问：http://localhost:9301/sss/page/{页面ID}
• 路由访问：http://localhost:9301/#/{页面路径}

Layer 弹窗系统

在脚本中可以通过 response 模块触发页面弹窗：

response.Json({
    code: 200,
    data: {
        layer: {
            title: "详情",
            url: "/page/detail",
            width: 800,
            height: 600
        }
    }
})

注意事项

• Vue SFC 基于 vue3-sfc-loader 动态编译，无需构建步骤
• 页面中的 API 请求需携带 JWT Token
• 页面样式使用 scoped 避免全局污染