feat: 新增首页预览图展示

src/views/project/items/components/ProjectItemsCard/index.vue

@@ -17,9 +17,7 @@
             object-fit="contain"
             height="180"
             preview-disabled
-            :src="
+            :src="cardData.image"
-              requireUrl('project/moke-20211219181327.png')
-            "
             :alt="cardData.title"
             :fallback-src="requireErrorImg()"
          ></n-image>
@@ -104,11 +102,6 @@ const props = defineProps({
   cardData: Object as PropType<Chartype>
 })
 
-// 处理url获取
-const requireUrl = (name: string) => {
-  return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
-}
-
 const fnBtnList = reactive([
   {
     label: renderLang('global.r_edit'),
@@ -131,12 +124,14 @@ const selectOptions = ref([
   {
     label: renderLang('global.r_copy'),
     key: 'copy',
-    icon: renderIcon(CopyIcon)
+    icon: renderIcon(CopyIcon),
+    disabled: true
   },
   {
     label: renderLang('global.r_rename'),
     key: 'rename',
-    icon: renderIcon(PencilIcon)
+    icon: renderIcon(PencilIcon),
+    disabled: true
   },
   {
     type: 'divider',
@@ -152,7 +147,8 @@ const selectOptions = ref([
   {
     label: renderLang('global.r_download'),
     key: 'download',
-    icon: renderIcon(DownloadIcon)
+    icon: renderIcon(DownloadIcon),
+    disabled: true
   },
   {
     type: 'divider',

src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts

@@ -32,12 +32,13 @@ export const useDataListInit = () => {
       const { count } = res
       paginat.count = count
       list.value = res.data.map((e: any) => {
-        const { id, projectName, state, createTime, createUserId } = e
+        const { id, projectName, state, createTime, indexImage, createUserId } = e
         return {
           id: id,
           title: projectName,
           createId: createUserId,
           time: createTime,
+          image: indexImage,
           release: state !== -1
         }
       })

src/views/project/items/components/ProjectItemsModalCard/index.vue

@@ -26,9 +26,7 @@
         <!-- 中间 -->
         <div class="list-content-img">
           <img
-            :src="
+            :src="cardData?.image"
-              requireUrl('project/moke-20211219181327.png')
-            "
             :alt="cardData?.title"
           />
         </div>
@@ -75,10 +73,11 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, PropType } from 'vue'
 import { renderIcon, renderLang } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
+import { Chartype } from '../../index.d'
 
 const { HammerIcon } = icon.ionicons5
 
@@ -86,14 +85,9 @@ const emit = defineEmits(['close', 'edit'])
 
 const props = defineProps({
   modalShow: Boolean,
-  cardData: Object
+  cardData: Object as PropType<Chartype>
 })
 
-// 处理url获取
-const requireUrl = (name: string) => {
-  return new URL(`../../../../../assets/images/${name}`, import.meta.url).href
-}
-
 const fnBtnList = reactive([
   {
     label: renderLang('global.r_edit'),
@@ -124,10 +118,12 @@ const closeHandle = () => {
 <style lang="scss" scoped>
 $padding: 30px;
 $contentHeight: calc(80vh);
+$imageHeight: calc(80vh - 110px);
 $contentWidth: calc(82vw);
 
 @include go('modal-box') {
   width: $contentWidth;
+  height: $contentHeight;
   .list-content {
     margin-top: 20px;
     border-radius: $--border-radius-base;
@@ -144,8 +140,9 @@ $contentWidth: calc(82vw);
     }
     &-img {
       @extend .go-flex-center;
+      padding: 6px 0;
       img {
-        max-height: $contentHeight;
+        height: $imageHeight;
         min-height: 200px;
         max-width: 100%;
         @extend .go-border-radius;

src/views/project/items/index.d.ts

@@ -3,6 +3,7 @@ export type Chartype = {
   title: string // 标题
   label: string // 标签
   time: string, // 时间
+  image: string, // 预览图地址
   createId: string, // 创建者
   release: boolean // false 未发布 | true 已发布
 }