Merge remote-tracking branch 'origin/feature/v1.2灵机空间-内容上传审核_rxd' into test

src/router/routes/modules/creativeGenerationWorkshop.ts

@@ -118,6 +118,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       locale: '分享链接列表',
       requiresAuth: false,
       requireLogin: false,
+      hideFooter: true,
       roles: ['*'],
     },
     component: () => import('@/views/creative-generation-workshop/explore/list/index.vue'),
@@ -129,6 +130,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       locale: '分享链接详情',
       requiresAuth: false,
       requireLogin: false,
+      hideFooter: true,
       roles: ['*'],
     },
     component: () => import('@/views/creative-generation-workshop/explore/detail/index.vue'),

src/styles/lib/reset.scss

@@ -9,6 +9,7 @@
 
 html,
 body {
+  height: 100%;
   background: $color-background;
   font-family: $font-family-regular;
   font-size: 14px;

src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue

@@ -175,7 +175,7 @@ export default {
                     }}
                   />
 
-                  <div class="flex flex-col flex-1 overflow-hidden">
+                  <div class="flex flex-col flex-1 ">
                     <div class="flex justify-between">
                       <p class="mb-4px">
                         <span class="cts !color-#211F24 mr-8px">{getCommentName(item)}</span>
@@ -201,7 +201,7 @@ export default {
                         />
                       </div>
                     )}
-                    <p class="cts !color-#211F24">{item.content}</p>
+                    <p class="cts !color-#211F24 break-all">{item.content}</p>
                   </div>
                 </div>
               ))}
@@ -281,7 +281,7 @@ export default {
     };
 
     return () => (
-      <section class="py-16px fixed z-3 right-16px w-440px h-full overflow-hidden">
+      <section class="ai-suggest-wrap py-16px fixed z-3 right-16px w-440px h-full overflow-hidden">
         <div class="ai-suggest-box relative py-24px flex flex-col">
           {!isEmpty(aiReview.value) && (
             <div class="relative w-fit ml-24px mb-16px">

src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss

@@ -1,118 +1,121 @@
-
+.ai-suggest-wrap {
-.ai-suggest-box {
+  top: $navbar-height;
-  width: 440px;
+  height: calc(100% - ($navbar-height + 12px));
-  height: fit-content;
+  .ai-suggest-box {
-  max-height: 100%;
+    width: 440px;
-  border-radius: 16px;
+    height: fit-content;
-  background: linear-gradient(126deg, #eef2fd 8.36%, #f5ebfe 49.44%, #fdebf3 90.52%);
+    max-height: 100%;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
-  .cts {
+    background: linear-gradient(126deg, #eef2fd 8.36%, #f5ebfe 49.44%, #fdebf3 90.52%);
-    color: #939499;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-    font-family: $font-family-regular;
+    .cts {
-    font-size: 14px;
+      color: #939499;
-    font-style: normal;
+      font-family: $font-family-regular;
-    font-weight: 400;
+      font-size: 14px;
-    line-height: 22px;
+      font-style: normal;
-    &.bold {
+      font-weight: 400;
+      line-height: 22px;
+      &.bold {
+        font-family: $font-family-medium;
+      }
+    }
+    .ai-text {
       font-family: $font-family-medium;
-    }
+      font-size: 16px;
-  }
+      font-style: normal;
-  .ai-text {
+      font-weight: 400;
-    font-family: $font-family-medium;
+      line-height: 24px;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px;
-    background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  :deep(.arco-textarea-wrapper) {
-    min-height: 38px;
-    display: flex;
-    border-color: transparent !important;
-    align-items: center;
-    border-radius: 8px !important;
-    background-color: #fff;
-    color: #211f24 !important;
-    transition: all 0.3s;
-    .arco-textarea-mirror,
-    .arco-textarea {
-      padding: 8px 16px !important;
-    }
-    &:hover {
-      border-color: #6d4cfe !important;
-    }
-    &.arco-textarea-focus {
-      border-color: #6d4cfe !important;
-    }
-  }
-  .result-box {
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(4px);
-    .result-item {
-      .s1 {
-        color: var(--Brand-6, #6d4cfe);
-        font-family: $font-family-manrope-medium;
-        font-size: 24px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 32px;
-      }
-      &:first-child {
-        position: relative;
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%);
-          right: 0;
-          width: 1px;
-          height: 32px;
-          background: var(--Border-1, #d7d7d9);
-        }
-      }
-    }
-  }
-  .collapse-box {
-    transition: all 0.3s;
-  }
-  .comment-box {
-    .cm {
       background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
-
+    :deep(.arco-textarea-wrapper) {
-    .comment-list {
+      min-height: 38px;
+      display: flex;
+      border-color: transparent !important;
+      align-items: center;
+      border-radius: 8px !important;
+      background-color: #fff;
+      color: #211f24 !important;
+      transition: all 0.3s;
+      .arco-textarea-mirror,
+      .arco-textarea {
+        padding: 8px 16px !important;
+      }
+      &:hover {
+        border-color: #6d4cfe !important;
+      }
+      &.arco-textarea-focus {
+        border-color: #6d4cfe !important;
+      }
+    }
+    .result-box {
+      background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(4px);
-      .comment-item {
+      .result-item {
-        &:not(:last-child) {
+        .s1 {
-          margin-bottom: 8px;
+          color: var(--Brand-6, #6d4cfe);
+          font-family: $font-family-manrope-medium;
+          font-size: 24px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 32px;
         }
-        &:hover {
+        &:first-child {
-          border-radius: 8px;
+          position: relative;
-          background: rgba(255, 255, 255, 0.8);
+          &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 0;
+            width: 1px;
+            height: 32px;
+            background: var(--Border-1, #d7d7d9);
+          }
         }
       }
     }
-  }
+    .collapse-box {
-  .main-box {
+      transition: all 0.3s;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-      background: transparent;
     }
-    &::-webkit-scrollbar-thumb {
+    .comment-box {
-      background-color: transparent;
+      .cm {
-      border: none;
+        background: linear-gradient(85deg, #7d419d 4.56%, #31353d 94.75%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .comment-list {
+        backdrop-filter: blur(4px);
+        .comment-item {
+          &:not(:last-child) {
+            margin-bottom: 8px;
+          }
+          &:hover {
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.8);
+          }
+        }
+      }
     }
-    &::-webkit-scrollbar-track {
+    .main-box {
-      background: transparent;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+        border: none;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
     }
   }
 }

src/views/creative-generation-workshop/explore/detail/style.scss

@@ -1,13 +1,27 @@
 .explore-page {
   position: relative;
-  padding-top: $navbar-height;
+  // padding-top: $navbar-height;
   min-width: 1200px;
   height: 100vh;
   background: #fff;
   display: flex;
   flex-direction: column;
-  .page-header {
+  .fold-box {
+    width: 40px;
+    height: 40px;
+    border-radius: 30px;
+    border: 1px solid var(--Border-1, #d7d7d9);
+    background: #fff;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
     position: fixed;
+    right: 16px;
+    top: calc($navbar-height + 32px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .page-header {
+    position: sticky;
     left: 0;
     right: 0;
     top: 0;
@@ -31,6 +45,7 @@
   }
 
   .page-wrap {
+    width: calc(100% - 456px);
     flex: 1;
     display: flex;
     justify-content: center;
@@ -47,20 +62,7 @@
         line-height: 40px; /* 142.857% */
       }
     }
-    .fold-box {
+
-      width: 40px;
-      height: 40px;
-      border-radius: 30px;
-      border: 1px solid var(--Border-1, #d7d7d9);
-      background: #fff;
-      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
-      position: absolute;
-      right: 16px;
-      top: 32px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
     .main-video-box {
       width: 320px;
       height: 472px;