feat: 场景布局管理开启

src/api/page-config/scene-layout.ts

@@ -0,0 +1,11 @@
+import { http } from '@/utils/http/axios';
+import { CompanyInfoList } from '@/types/scene-layout/type';
+/**
+ * @description 查询公司列表
+ */
+export function getCompanyList() {
+  return http.request<CompanyInfoList[]>({
+    url: '/admin/workshop/queryCompanyList',
+    method: 'get',
+  });
+}

src/types/scene-layout/type.ts

@@ -0,0 +1,5 @@
+export interface CompanyInfoList {
+  id: number;
+  name: string;
+  thumbnail: string;
+}

src/views/page-config/PageConfig.vue

@@ -1,50 +1,105 @@
 <template>
-  <div class="flex flex-col page-config-content">
-    <el-card shadow="never">
-      <div style="display: flex; justify-content: space-between">
-        <el-input v-model="searchCom" class="search-btn w-50" placeholder="搜索公司主页">
-          <template #suffix>
-            <el-icon @click="searchPageConfig" @keyup.enter="searchPageConfig"><Search /></el-icon>
-          </template>
-        </el-input>
-        <el-button
-          style="width: 102px; background-color: rgb(24, 144, 255); border: none"
-          type="primary"
-          @click="broadcast"
-        >
-          主页发布
-        </el-button>
+  <div class="page-config-content">
+    <main class="main__config">
+      <div class="card--default" @click="toSceneLayout('pc')">
+        <section class="card__left">
+          <img :src="PCIcon">
+        </section>
+        <section class="card__right">
+          <span class="span__card--title">
+            PC端{{ titleDefault }}
+          </span>
+          <span class="span__card--describe">
+            {{ describeDefault }} PC端生效
+          </span>
+        </section>
       </div>
-    </el-card>
-    <el-card shadow="never" class="flex-1" style="margin-top: 8px; overflow: auto">
-      <PageMain ref="pageMain" />
-    </el-card>
+      <div class="card--default" @click="toSceneLayout('phone')">
+        <section class="card__left">
+          <img :src="PhoneIcon">
+        </section>
+        <section class="card__right">
+          <span class="span__card--title">
+            手机端{{ titleDefault }}
+          </span>
+          <span class="span__card--describe">
+            {{ describeDefault }} 手机端生效
+          </span>
+        </section>
+      </div>
+    </main>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import { Search } from '@element-plus/icons-vue';
-  import PageMain from './component/PageMain.vue';
-
-  const searchCom = ref('');
-  const pageMain = ref();
-
-  const searchPageConfig = () => {
-    pageMain.value.getList(searchCom.value);
-  };
-
-  const broadcast = () => {
-    ElMessage({
-      message: '发布已勾选的主页',
-      type: 'success',
-    });
-  };
+import PCIcon from '@/assets/images/page-config/config-pc.png'
+import PhoneIcon from '@/assets/images/page-config/config-phone.png'
+import router from '@/router';
+const titleDefault = "主页布局"
+const describeDefault = "编辑的主页布局、 \n位置标签等在\n"
+const toSceneLayout = (type: 'phone' | 'pc') => {
+  router.push(`/layout/layout?type=${type}`)
+}
 </script>
 
 <style lang="scss" sctep>
-  .page-config-content {
-    width: 100%;
-    height: calc(100vh - 64px - 12px);
+.page-config-content {
+  width: 100%;
+  height: calc(100vh - 64px - 12px);
+  padding: 47px 84px 0 84px;
+  background: #ffffff;
+  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+}
+
+.main__config {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: auto;
+
+  .card--default {
+    display: flex;
+    width: 490px;
+    height: 300px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-image: url('@/assets/images/page-config/card-bg-default.png');
+    transition: background-image 0.3s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      background-image: url('@/assets/images/page-config/card-bg-hover.png');
+    }
+  }
+
+  .card__left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    height: inherit;
+  }
+
+  .card__right {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 20px;
+    flex: 1;
+
+    .span__card--title {
+      font-weight: 600;
+      font-size: 28px;
+      color: #1777FF;
+    }
+
+    .span__card--describe {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 33px;
+      color: #909399;
+      white-space: pre-line;
+    }
   }
+}
 </style>

src/views/page-config/PageSceneLayout.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="scene-layout">
+        <header class="scene-layout__header">
+            <div class="header__btn" @click="router.back">
+                <img :src="rollback">
+                <span>返回</span>
+            </div>
+        </header>
+        <main class="scene-layout__main">
+            <section v-if="length > 0" class="main__layout">
+                <el-card v-for="conpany in companyList" :key="conpany.id" shadow="hover" class="layout-card">
+                    <div class="layout-card__empty">
+                        <img :src="noLayout">
+                        <span>请添加场景布局</span>
+                    </div>
+                    <template #footer>
+                        <span class="footer--default">{{ conpany.name }}</span>
+                        <div class="icons">
+                            <el-tooltip effect="light" :show-after="200" content="预览" placement="top">
+                                <img :src="preview">
+                            </el-tooltip>
+                            <el-tooltip effect="light" :show-after="200" content="编辑" placement="top">
+                                <img :src="edit">
+                            </el-tooltip>
+                        </div>
+                    </template>
+                </el-card>
+            </section>
+            <section class="main__empty" v-else>
+                <img :src="empty">
+                <span>目前无内容，
+                    <router-link to="/scene/workshop">请先添加公司</router-link>
+                </span>
+            </section>
+        </main>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import rollback from '@/assets/rollback.png'
+import empty from '@/assets/images/table/table-empty.png'
+import noLayout from '@/assets/images/page-config/no-layout.png'
+import preview from '@/assets/images/table/table-preview.png';
+import edit from '@/assets/images/table/table-edit.png';
+import router from '@/router';
+import { CompanyInfoList } from '@/types/scene-layout/type'
+import { getCompanyList } from '@/api/page-config/scene-layout'
+import { computed, onMounted, ref } from 'vue';
+const companyList = ref<CompanyInfoList[]>([])
+const length = computed(() => {
+    return companyList.value.length
+})
+onMounted(async () => {
+    companyList.value = await getCompanyList();
+})
+</script>
+
+<style lang="scss" scoped>
+.footer--default {
+    opacity: 0.45;
+}
+
+.scene-layout {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 64px);
+
+    &__header {
+        display: flex;
+        align-items: center;
+        width: inherit;
+        height: 54px;
+        padding-left: 23px;
+        background: #ffffff;
+        border-top: 1px solid rgba(0, 0, 0, 0.10);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
+
+        .header__btn {
+            display: flex;
+            gap: 10px;
+            cursor: pointer;
+        }
+
+        img {
+            width: 14px;
+            height: 14px;
+        }
+
+        span {
+            line-height: 14px;
+
+            &:hover {
+                text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.12);
+            }
+        }
+    }
+
+    &__main {
+        margin-top: 12px;
+        width: inherit;
+        height: calc(100vh - 64px - 54px - 12px);
+        background: #ffffff;
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
+        border-radius: 6px;
+    }
+
+    .main__layout {
+        display: flex;
+        gap: 25px;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        width: inherit;
+        height: inherit;
+        padding: 22px 24px 22px 24px;
+    }
+
+    .layout-card {
+        width: 216px;
+        height: 190px;
+
+        &__empty {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+            width: inherit;
+            height: inherit;
+            cursor: pointer;
+        }
+    }
+
+    :deep(.el-card__body) {
+        width: inherit;
+        height: 145px;
+        padding: 0;
+        background: #F5F5F5;
+    }
+
+    :deep(.el-card__footer) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: inherit;
+        height: 45px;
+        padding: 0 12px 0 12px;
+
+        .icons {
+            display: flex;
+            gap: 10px;
+
+            img {
+                cursor: pointer;
+                opacity: 0.40;
+                transition: opacity 0.5s ease-in-out;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .main__empty {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        justify-content: center;
+        align-items: center;
+        width: inherit;
+        height: inherit;
+    }
+}
+</style>