添加水印

devcloud/web/src/layout/BackendLayout.vue

@@ -89,9 +89,11 @@
           </div>
 
           <!-- 主内容区 -->
+          <a-watermark content="arco.design" :font="{ color: 'rgba(0, 0, 0, 0.06)' }">
             <main class="router-view-wrapper">
               <router-view />
             </main>
+          </a-watermark>
 
           <!-- 页脚（会随内容滚动） -->
           <footer class="layout-footer">
@@ -347,7 +349,7 @@ const toggleSidebar = () => {
 /* 路由视图容器 */
 .router-view-wrapper {
   flex: 1;
-  padding: 0 24px;
+  padding: 0px 20px 0px 40px;
   min-height: calc(100vh - 180px);
   /* 动态计算最小高度 */
 }

devcloud/web/src/pages/cmdb/SecretPage.vue

@@ -1,11 +1,113 @@
 <template>
-  <div style="height: 900px;">
+  <a-form layout="inline" :model="form">
-    测试使用
+    <a-form-item label="Border" field="border">
-  </div>
+      <a-switch v-model="form.border" />
+    </a-form-item>
+    <a-form-item label="Hover" field="hover">
+      <a-switch v-model="form.hover" />
+    </a-form-item>
+    <a-form-item label="stripe" field="stripe">
+      <a-switch v-model="form.stripe" />
+    </a-form-item>
+    <a-form-item label="checkbox" field="checkbox">
+      <a-switch v-model="form.checkbox" />
+    </a-form-item>
+    <a-form-item label="checkAll" field="checkAll">
+      <a-switch v-model="rowSelection.showCheckedAll" />
+    </a-form-item>
+    <a-form-item label="loading" field="loading">
+      <a-switch v-model="form.loading" />
+    </a-form-item>
+    <a-form-item label="tableHeader" field="tableHeader">
+      <a-switch v-model="form.tableHeader" />
+    </a-form-item>
+    <a-form-item label="noData" field="noData">
+      <a-switch v-model="form.noData" />
+    </a-form-item>
+  </a-form>
+  <a-table :columns="columns" :data="form.noData ? [] : data" :bordered="form.border" :hoverable="form.hover"
+    :stripe="form.stripe" :loading="form.loading" :show-header="form.tableHeader"
+    :row-selection="form.checkbox ? rowSelection : undefined" />
 </template>
 
-<script setup>
+<script>
+import { reactive } from 'vue';
 
+export default {
+  setup() {
+    const form = reactive({
+      border: true,
+      borderCell: false,
+      hover: true,
+      stripe: false,
+      checkbox: true,
+      loading: false,
+      tableHeader: true,
+      noData: false
+    });
+
+    const rowSelection = reactive({
+      type: 'checkbox',
+      showCheckedAll: true
+    });
+
+    const columns = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+      },
+      {
+        title: 'Salary',
+        dataIndex: 'salary',
+      },
+      {
+        title: 'Address',
+        dataIndex: 'address',
+      },
+      {
+        title: 'Email',
+        dataIndex: 'email',
+      },
+    ];
+
+    const data = [{
+      key: '1',
+      name: 'Jane Doe',
+      salary: 23000,
+      address: '32 Park Road, London',
+      email: 'jane.doe@example.com'
+    }, {
+      key: '2',
+      name: 'Alisa Ross',
+      salary: 25000,
+      address: '35 Park Road, London',
+      email: 'alisa.ross@example.com'
+    }, {
+      key: '3',
+      name: 'Kevin Sandra',
+      salary: 22000,
+      address: '31 Park Road, London',
+      email: 'kevin.sandra@example.com'
+    }, {
+      key: '4',
+      name: 'Ed Hellen',
+      salary: 17000,
+      address: '42 Park Road, London',
+      email: 'ed.hellen@example.com'
+    }, {
+      key: '5',
+      name: 'William Smith',
+      salary: 27000,
+      address: '62 Park Road, London',
+      email: 'william.smith@example.com'
+    }];
+
+    return {
+      form,
+      rowSelection,
+      columns,
+      data
+    }
+  },
+}
 </script>
-
-<style lang="css" scoped></style>