fix: 完成首页静态展示内容

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

@@ -1,105 +0,0 @@
-<template>
-  <div class="go-items-list">
-    <n-grid
-      :x-gap="20"
-      :y-gap="20"
-      cols="2 s:2 m:3 l:4 xl:4 xxl:4"
-      responsive="screen"
-    >
-      <n-grid-item v-for="item in list" :key="item.id">
-        <n-card hoverable size="small">
-          <div class="list-content">
-            <n-space>
-              <n-button size="small">
-                <template #icon>
-                  <n-icon>
-                    <EllipsisHorizontalCircleSharpIcon />
-                  </n-icon>
-                </template>
-              </n-button>
-            </n-space>
-            <div class="list-content-top"></div>
-            <n-image
-              object-fit="cover"
-              width="100"
-              src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
-              :alt="item.title"
-            />
-          </div>
-          <template #action>
-            <n-skeleton v-if="loading" round size="medium" />
-            <n-space v-else justify="space-between">
-              <n-text>
-                奔跑的模板
-              </n-text>
-              <!-- 工具 -->
-              <n-space>
-                <n-button size="small">
-                  <template #icon>
-                    <n-icon>
-                      <EllipsisHorizontalCircleSharpIcon />
-                    </n-icon>
-                  </template>
-                </n-button>
-                <n-button size="small">
-                  <template #icon>
-                    <n-icon>
-                      <CopyIcon />
-                    </n-icon>
-                  </template>
-                </n-button>
-              </n-space>
-              <!-- end -->
-            </n-space>
-          </template>
-        </n-card>
-      </n-grid-item>
-    </n-grid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import {
-  EllipsisHorizontalSharp as EllipsisHorizontalCircleSharpIcon,
-  CopyOutline as CopyIcon
-} from '@vicons/ionicons5'
-const loading = ref<boolean>(true)
-
-setTimeout(() => {
-  loading.value = false
-}, 200)
-
-const list = reactive([
-  {
-    id: 1,
-    title: '物料1'
-  },
-  {
-    id: 2,
-    title: '物料1'
-  },
-  {
-    id: 3,
-    title: '物料1'
-  },
-  {
-    id: 4,
-    title: '物料1'
-  },
-  {
-    id: 5,
-    title: '物料1'
-  }
-])
-</script>
-
-<style lang="scss" scoped>
-$contentHeight: 250px;
-@include go('items-list') {
-  .list-content {
-    position: relative;
-    height: $contentHeight;
-  }
-}
-</style>

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

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

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

@@ -0,0 +1,176 @@
+<template>
+  <div class="go-items-list-card">
+    <n-card hoverable size="small">
+      <div class="list-content">
+        <!-- 顶部按钮 -->
+        <n-space class="list-content-top">
+          <AppleControlBtn @close="deleteHanlde" />
+        </n-space>
+        <!-- 中间 -->
+        <div class="list-content-img">
+          <n-image
+            object-fit="contain"
+            height="200"
+            :src="requireUrl('.', '20211219181327.png')"
+            :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-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">
+              <template v-if="item.key === 'select'">
+                <n-dropdown
+                  trigger="hover"
+                  placement="bottom-start"
+                  :options="selectOptions"
+                  :show-arrow="true"
+                  @select="handleSelect"
+                >
+                  <n-button size="small">
+                    <template #icon>
+                      <component :is="item.icon" />
+                    </template>
+                  </n-button>
+                </n-dropdown>
+              </template>
+
+              <n-button v-else size="small">
+                <template #icon>
+                  <component :is="item.icon" />
+                </template>
+              </n-button>
+            </template>
+          </n-space>
+          <!-- end -->
+        </n-space>
+      </template>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { renderIcon, goDialog } from '@/utils/index'
+import { icon } from '@/plugins'
+import { AppleControlBtn } from '@/components/AppleControlBtn'
+import { useMessage, useDialog } from 'naive-ui'
+const {
+  EllipsisHorizontalCircleSharpIcon,
+  CopyIcon,
+  TrashIcon,
+  PencilIcon,
+  ApertureSharpIcon,
+  DownloadIcon
+} = icon.ionicons5
+
+const loading = ref<boolean>(true)
+const dialog = useDialog()
+const message = useMessage()
+defineProps({
+  CardData: Object
+})
+
+const fnBtnList = [
+  {
+    lable: '更多',
+    key: 'select',
+    icon: renderIcon(EllipsisHorizontalCircleSharpIcon)
+  }
+]
+
+const selectOptions = [
+  {
+    label: '预览',
+    key: 'preview',
+    icon: renderIcon(ApertureSharpIcon)
+  },
+  {
+    label: '复制',
+    key: 'copy',
+    icon: renderIcon(CopyIcon)
+  },
+  {
+    label: '重命名',
+    key: 'rename',
+    icon: renderIcon(PencilIcon)
+  },
+  {
+    label: '下载',
+    key: 'download',
+    icon: renderIcon(DownloadIcon)
+  },
+  {
+    type: 'divider',
+    key: 'd1'
+  },
+  {
+    label: '删除',
+    key: 'delete',
+    icon: renderIcon(TrashIcon)
+  }
+]
+
+const handleSelect = (key: string) => {
+  console.log(key)
+}
+
+const requireUrl = (path: string, name: string) => {
+  return new URL(`${path}/${name}`, import.meta.url).href
+}
+
+const deleteHanlde = () => {
+  goDialog(dialog.warning, {
+    type: 'delete',
+    onPositiveCallback: () => {
+      message.success('确定')
+    }
+  })
+}
+
+setTimeout(() => {
+  loading.value = false
+}, 1500)
+</script>
+
+<style lang="scss" scoped>
+$contentHeight: 200px;
+@include go('items-list-card') {
+  position: relative;
+  .list-content {
+    margin-top: 20px;
+    margin-bottom: 5px;
+    border-radius: $--border-radius-base;
+    @include background-point('background-point');
+    @extend .go-point-bg;
+    &-top {
+      position: absolute;
+      top: 5px;
+      left: 10px;
+      height: 22px;
+    }
+    &-img {
+      height: $contentHeight;
+      @extend .go-flex-center;
+      @extend .go-border-radius;
+      @include deep() {
+        img {
+          @extend .go-border-radius;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="go-items-list">
+    <n-grid
+      :x-gap="20"
+      :y-gap="20"
+      cols="2 s:2 m:3 l:4 xl:4 xxl:4"
+      responsive="screen"
+    >
+      <n-grid-item v-for="item in list" :key="item.id">
+        <Card :CardData="item" />
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { Card } from '../Card/index'
+import {
+  EllipsisHorizontalSharp as EllipsisHorizontalCircleSharpIcon,
+  CopyOutline as CopyIcon
+} from '@vicons/ionicons5'
+const loading = ref<boolean>(true)
+
+setTimeout(() => {
+  loading.value = false
+}, 500)
+
+const list = reactive([
+  {
+    id: 1,
+    title: '物料1',
+    release: true
+  },
+  {
+    id: 2,
+    title: '物料1'
+  },
+  {
+    id: 3,
+    title: '物料1'
+  },
+  {
+    id: 4,
+    title: '物料1'
+  },
+  {
+    id: 5,
+    title: '物料1'
+  }
+])
+</script>
+
+<style lang="scss" scoped>
+$contentHeight: 250px;
+@include go('items-list') {
+  .list-content {
+    position: relative;
+    height: $contentHeight;
+  }
+}
+</style>

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

@@ -0,0 +1,7 @@
+export type CardType = {
+  id: number | string
+  title: string // 标题
+  lableId: string | number
+  label: string // 标签
+  release: number // 0未发布 | 1已发布
+}

src/views/project/items/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { List } from './List'
+import { List } from './components/List'
 </script>
 
 <style lang="scss" scoped>