修改通用配置

src/views/dataSharingAndExchange/commonSetting/commonDataSet.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+
+export const Columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'title',
+  },
+  {
+    title: '部门',
+    dataIndex: 'dept',
+  },
+  {
+    title: '标签',
+    dataIndex: 'label',
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createdBy',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createdTime',
+  },
+  {
+    title: '浏览次数',
+    dataIndex: 'view',
+  },
+  {
+    title: '推送次数',
+    dataIndex: 'edit',
+  },
+  {
+    title: '共享类型',
+    dataIndex: 'isShare',
+    slots: { customRender: 'isShare' },
+  },
+];
+export const downLoadSchema: FormSchema[] = [
+  {
+    field: 'num',
+    label: '最大下载行数',
+    component: 'Input',
+    defaultValue: 1000,
+    required: true,
+  },
+];
+export const waterMarkSchema: FormSchema[] = [
+  {
+    field: 'waterMark',
+    label: '水印',
+    component: 'Switch',
+    defaultValue: true,
+    required: true,
+  },
+  {
+    field: 'type',
+    label: '水印类型',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '固定水印',
+          value: '1',
+        },
+        {
+          label: '动态水印',
+          value: '2',
+        },
+      ],
+    },
+    defaultValue: '1',
+    required: true,
+  },
+  {
+    field: 'strategy',
+    label: '水印生成策略',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '每行一个',
+          value: '1',
+        },
+        {
+          label: '每行多个',
+          value: '2',
+        },
+      ],
+    },
+    required: true,
+  },
+];
+export const previewSchema: FormSchema[] = [
+  {
+    field: 'preview',
+    label: '文件预览',
+    component: 'Switch',
+    defaultValue: true,
+    required: true,
+  },
+  {
+    field: 'type',
+    label: '预览生成方式',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '系统自动生成',
+          value: '1',
+        },
+        {
+          label: '用户上传',
+          value: '2',
+        },
+      ],
+    },
+    defaultValue: '1',
+    required: true,
+  },
+  {
+    field: 'num',
+    label: '最大预览页面',
+    defaultValue: 5,
+    component: 'Input',
+    required: true,
+  },
+];

src/views/dataSharingAndExchange/commonSetting/index.vue

 <template>
-  <div>11111</div>
+  <div class="full-page-container">
+    <PageWrapper class="page-wrapper">
+      <template #headerContent>
+        <div class="headerContent">
+          <div>
+            <Icon icon="grommet-icons:settings-option" :size="40" :color="'#61aaff'" />
+            <span class="title">通用配置</span>
+          </div>
+        </div>
+      </template>
+      <div>
+        <span class="card-title">数据源</span>
+        <List>
+          <Row :gutter="16">
+            <Col :span="8">
+              <ListItem>
+                <Card :hoverable="true" style="height: 200px; width: 500px; position: relative">
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <div style="display: flex">
+                        <Icon size="23" icon="lucide:download" :color="'#61aaff'" />
+                      </div>
+                      <div>
+                        <span class="card-title">下载配置</span>
+                      </div>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <span style="color: #61aaff; margin-right: 10px" @click="cancel">取消</span>
+                      <span style="color: #61aaff" @click="handSave">保存</span>
+                    </div>
+                  </div>
+                  <div style="padding-top: 50px">
+                    <BasicForm @register="registerForm" />
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+          </Row>
+        </List>
+      </div>
+      <div style="padding-top: 30px">
+        <span class="card-title">文件资源</span>
+        <List>
+          <Row :gutter="24">
+            <Col :span="8">
+              <ListItem>
+                <Card :hoverable="true" style="height: 300px; width: 500px; position: relative">
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <div style="display: flex">
+                        <Icon size="23" icon="material-symbols:branding-watermark-outline-sharp" :color="'#61aaff'" />
+                      </div>
+                      <div>
+                        <span class="card-title">水印配置</span>
+                      </div>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <span style="color: #61aaff; margin-right: 10px" @click="cancel1">取消</span>
+                      <span style="color: #61aaff" @click="handSave">保存</span>
+                    </div>
+                  </div>
+                  <div style="padding-top: 50px">
+                    <BasicForm @register="registerWaterMarkForm" />
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+            <Col :span="8">
+              <ListItem>
+                <Card :hoverable="true" style="height: 300px; width: 500px; position: relative">
+                  <div style="display: flex; justify-content: space-between">
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <div style="display: flex">
+                        <Icon size="23" icon="qlementine-icons:print-preview-16" :color="'#61aaff'" />
+                      </div>
+                      <div>
+                        <span class="card-title">预览配置</span>
+                      </div>
+                    </div>
+                    <div style="display: flex; align-items: center; gap: 5px">
+                      <span style="color: #61aaff; margin-right: 10px" @click="cancel2">取消</span>
+                      <span style="color: #61aaff" @click="handSave">保存</span>
+                    </div>
+                  </div>
+                  <div style="padding-top: 50px">
+                    <BasicForm @register="registerPreviewForm" />
+                  </div>
+                </Card>
+              </ListItem>
+            </Col>
+          </Row>
+        </List>
+      </div>
+    </PageWrapper>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
+<script lang="ts" setup>
+  import { Card, Row, Col, List, ListItem } from 'ant-design-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { onMounted } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { BasicForm, useForm } from '@/components/Form';
+  import {
+    downLoadSchema,
+    previewSchema,
+    waterMarkSchema,
+  } from '@/views/dataSharingAndExchange/commonSetting/commonDataSet.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { resetFields }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: downLoadSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerWaterMarkForm, { resetFields: resetWaterMarkFields }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: waterMarkSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  const [registerPreviewForm, { resetFields: resetPreviewFields }] = useForm({
+    labelWidth: 120,
+    labelAlign: 'left',
+    baseColProps: { lg: 24, md: 24 },
+    schemas: previewSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  function handSave() {
+    createMessage.success('保存成功');
+  }
+  function cancel() {
+    resetFields();
+  }
+  function cancel1() {
+    resetWaterMarkFields();
+  }
+  function cancel2() {
+    resetPreviewFields();
+  }
+
+  onMounted(() => {});
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .full-page-container {
+    display: flex;
+    height: 100%;
+  }
+
+  .group-tree {
+    width: 250px;
+    background-color: #f0f0f0;
+  }
+
+  .page-wrapper {
+    flex: 1;
+    min-height: 860px;
+    padding: 20px;
+    background-color: #ffffff;
+  }
+
+  .headerContent {
+    display: flex;
+    align-items: center;
+    .title {
+      font-size: 25px;
+      font-weight: bold;
+    }
+    .path {
+      font-size: 14px;
+      color: gray;
+    }
+    .buttonGroup {
+      margin-left: auto;
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+  }
+
+  .icon-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  .sceneSelectionIcon {
+    transition: color 0.3s ease;
+  }
+
+  .card-title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .card-dept {
+    font-size: 12px;
+    color: gray;
+  }
+
+  .card-description {
+    margin-top: 10px;
+    color: gray;
+  }
+
+  .cardFooter {
+    padding: 10px;
+  }
 
+  .search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .centent1 {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+    .iconClass1 {
+      font-size: 20px;
+      color: rgb(27, 148, 243);
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+    .iconClass2 {
+      font-size: 20px;
+    }
+  }
+  .centent2 {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    .centent2-1 {
+      margin-right: 20px;
+      color: rgb(146, 153, 167);
+      font-size: 13px;
+    }
+  }
+  .iconClass3 {
+    font-size: 12px;
+    margin-left: 2px;
+  }
 </style>