处理弹窗的放大缩小

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

@@ -4,37 +4,41 @@
       <div class="list-content">
         <!-- 顶部按钮 -->
         <n-space class="list-content-top">
-          <AppleControlBtn @close="deleteHanlde" />
+          <AppleControlBtn @close="deleteHanlde" @resize="resizeHandle" />
         </n-space>
         <!-- 中间 -->
         <div class="list-content-img">
           <n-image
             object-fit="contain"
             height="200"
+            preview-disabled
             :src="requireUrl('.', '20211219181327.png')"
-            :alt="CardData.title"
+            :alt="cardData.title"
           />
         </div>
       </div>
       <template #action>
-        <Skeleton v-if="loading" :loading="loading" text round size="small" />
-        <n-space v-else justify="space-between">
+        <n-space class="list-footer" justify="space-between">
           <n-text>
-            {{ CardData.title || '' }}
+            {{ cardData.title || '' }}
           </n-text>
 
           <!-- 工具 -->
           <n-space>
             <n-text>
-              <n-badge class="animation-twinkle" dot :color="CardData.release ? '#34c749' : '#fcbc40'" />
-              {{ CardData.release ? '已发布' : '未发布' }}
+              <n-badge
+                class="animation-twinkle"
+                dot
+                :color="cardData.release ? '#34c749' : '#fcbc40'"
+              />
+              {{ cardData.release ? '已发布' : '未发布' }}
             </n-text>
 
             <template v-for="item in fnBtnList" :key="item.key">
               <template v-if="item.key === 'select'">
                 <n-dropdown
                   trigger="hover"
-                  placement="bottom-start"
+                  placement="bottom"
                   :options="selectOptions"
                   :show-arrow="true"
                   @select="handleSelect"
@@ -47,11 +51,16 @@
                 </n-dropdown>
               </template>
 
-              <n-button v-else size="small">
-                <template #icon>
-                  <component :is="item.icon" />
+              <n-tooltip v-else placement="bottom" trigger="hover">
+                <template #trigger>
+                  <n-button size="small">
+                    <template #icon>
+                      <component :is="item.icon" />
+                    </template>
+                  </n-button>
                 </template>
-              </n-button>
+                <span> {{ item.label }}</span>
+              </n-tooltip>
             </template>
           </n-space>
           <!-- end -->
@@ -73,17 +82,26 @@ const {
   TrashIcon,
   PencilIcon,
   ApertureSharpIcon,
-  DownloadIcon
+  DownloadIcon,
+  HammerIcon,
+  SendIcon
 } = icon.ionicons5
 
-const loading = ref<boolean>(true)
 const dialog = useDialog()
 const message = useMessage()
-defineProps({
-  CardData: Object
+
+const emit = defineEmits(['resize'])
+
+const props = defineProps({
+  cardData: Object
 })
 
 const fnBtnList = [
+  {
+    label: '编辑',
+    key: 'edit',
+    icon: renderIcon(HammerIcon)
+  },
   {
     lable: '更多',
     key: 'select',
@@ -107,6 +125,15 @@ const selectOptions = [
     key: 'rename',
     icon: renderIcon(PencilIcon)
   },
+  {
+    type: 'divider',
+    key: 'd1'
+  },
+  {
+    label: props.cardData?.release ? '取消发布' : '发布',
+    key: 'send',
+    icon: renderIcon(SendIcon)
+  },
   {
     label: '下载',
     key: 'download',
@@ -114,7 +141,7 @@ const selectOptions = [
   },
   {
     type: 'divider',
-    key: 'd1'
+    key: 'd2'
   },
   {
     label: '删除',
@@ -131,6 +158,7 @@ const requireUrl = (path: string, name: string) => {
   return new URL(`${path}/${name}`, import.meta.url).href
 }
 
+// 删除处理
 const deleteHanlde = () => {
   goDialog(dialog.warning, {
     type: 'delete',
@@ -140,9 +168,10 @@ const deleteHanlde = () => {
   })
 }
 
-setTimeout(() => {
-  loading.value = false
-}, 1500)
+// 放大处理
+const resizeHandle = () => {
+  emit('resize', props.cardData)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -157,7 +186,7 @@ $contentHeight: 200px;
     @extend .go-point-bg;
     &-top {
       position: absolute;
-      top: 5px;
+      top: 10px;
       left: 10px;
       height: 22px;
     }
@@ -172,5 +201,8 @@ $contentHeight: 200px;
       }
     }
   }
+  .list-footer {
+    line-height: 30px;
+  }
 }
 </style>

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

@@ -7,24 +7,21 @@
       responsive="screen"
     >
       <n-grid-item v-for="item in list" :key="item.id">
-        <Card :CardData="item" />
+        <Card :cardData="item" @resize="resizeHandle" />
       </n-grid-item>
     </n-grid>
   </div>
+  <ModalCard :show="modalShow" :cardData="modalData" @close="closeModal" />
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { Card } from '../Card/index'
+import { ModalCard } from '../ModalCard/index'
 import {
   EllipsisHorizontalSharp as EllipsisHorizontalCircleSharpIcon,
   CopyOutline as CopyIcon
 } from '@vicons/ionicons5'
-const loading = ref<boolean>(true)
-
-setTimeout(() => {
-  loading.value = false
-}, 500)
 
 const list = reactive([
   {
@@ -34,21 +31,40 @@ const list = reactive([
   },
   {
     id: 2,
-    title: '物料1'
+    title: '物料2',
+    release: false
   },
   {
     id: 3,
-    title: '物料1'
+    title: '物料3',
+    release: false
   },
   {
     id: 4,
-    title: '物料1'
+    title: '物料4',
+    release: false
   },
   {
     id: 5,
-    title: '物料1'
+    title: '物料5',
+    release: false
   }
 ])
+
+const modalData = ref({})
+const modalShow = ref(false)
+
+// 关闭 modal
+const closeModal = () => {
+  modalShow.value = false
+}
+
+// 打开 modal
+const resizeHandle = (cardData: object) => {
+  modalShow.value = true
+  modalData.value = cardData
+}
+
 </script>
 
 <style lang="scss" scoped>

src/views/project/items/components/ModalCard/index.ts

@@ -0,0 +1,3 @@
+import ModalCard from './index.vue'
+
+export { ModalCard }

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

@@ -0,0 +1,127 @@
+<template>
+  <n-modal class="go-modal-card" v-model:show="showModal">
+    <slot name="default">
+      <n-card hoverable size="small">
+        <div class="list-content">
+          <!-- 顶部按钮 -->
+          <n-space class="list-content-top">
+            <AppleControlBtn
+              :narrow="true"
+              :hidden="['close']"
+              @remove="closeHandle"
+            />
+          </n-space>
+          <!-- 中间 -->
+          <div class="list-content-img">
+            <img
+              :src="requireUrl('.', '20211219181327.png')"
+              :alt="cardData?.title"
+            />
+          </div>
+        </div>
+        <template #action>
+          <n-space class="list-footer" justify="space-between">
+            <n-text>
+              {{ cardData?.title || '' }}
+            </n-text>
+
+            <!-- 工具 -->
+            <n-space>
+              <n-text>
+                <n-badge
+                  class="animation-twinkle"
+                  dot
+                  :color="cardData?.release ? '#34c749' : '#fcbc40'"
+                />
+                {{ cardData?.release ? '已发布' : '未发布' }}
+              </n-text>
+
+              <template v-for="item in fnBtnList" :key="item.key">
+                <n-tooltip placement="bottom" trigger="hover">
+                  <template #trigger>
+                    <n-button size="small">
+                      <template #icon>
+                        <component :is="item.icon" />
+                      </template>
+                    </n-button>
+                  </template>
+                  <span> {{ item.label }}</span>
+                </n-tooltip>
+              </template>
+            </n-space>
+            <!-- end -->
+          </n-space>
+        </template>
+      </n-card>
+    </slot>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { renderIcon } from '@/utils/index'
+import { icon } from '@/plugins'
+import { AppleControlBtn } from '@/components/AppleControlBtn'
+const { HammerIcon } = icon.ionicons5
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+  modalShow: Boolean,
+  cardData: Object
+})
+
+const handleSelect = (key: string) => {
+  console.log(key)
+}
+
+const requireUrl = (path: string, name: string) => {
+  return new URL(`${path}/${name}`, import.meta.url).href
+}
+
+const fnBtnList = [
+  {
+    label: '编辑',
+    key: 'edit',
+    icon: renderIcon(HammerIcon)
+  }
+]
+// 放大处理
+const resizeHandle = () => {}
+
+// 关闭对话框
+const closeHandle = () => {
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+$padding: 30px;
+$contentHeight: calc(80vh);
+@include go('modal-card') {
+  position: relative;
+  width: 82vw;
+  .list-content {
+    margin-top: 20px;
+    border-radius: $--border-radius-base;
+    overflow: hidden;
+    @include background-point('background-point');
+    @extend .go-point-bg;
+    &-top {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      height: 22px;
+    }
+    &-img {
+      @extend .go-flex-center;
+      img {
+        height: $contentHeight;
+        @extend .go-border-radius;
+      }
+    }
+  }
+  .list-footer {
+    line-height: 30px;
+  }
+}
+</style>

src/views/project/layout/components/Sider/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-layout-sider
-    class="go-project-layout-sider"
+    class="go-project-sider"
     bordered
     collapse-mode="width"
     show-trigger="bar"
@@ -68,6 +68,7 @@ $siderHeight: 100vh;
 
 @include go(project) {
   &-sider {
+    @include filter-bg-color('aside-background_color');
     &-top {
       display: flex;
       align-items: center;