内容发布完成

src/components/AiDetail.vue

@@ -0,0 +1,122 @@
+<template>
+  <section class="AiDetail">
+    <AiTopFixed class="header">
+      <slot v-if="$slots.header" name="header"/>
+      <template v-else>
+        <b class="title" v-text="title"/>
+        <div flex class="bottomBar">
+          <span v-text="detail.createTime"/>
+          <div flex>
+            <u-icon name="eye" :label="detail.count||0" size="36"/>
+            <u-icon name="thumb-up" :label="detail.thumbsUp||0" size="36"/>
+          </div>
+        </div>
+      </template>
+    </AiTopFixed>
+    <div class="content">
+      <slot v-if="$slots.content" name="content"/>
+      <u-parse v-else :html="detail.content"/>
+    </div>
+    <div class="files">
+      <slot v-if="$slots.files" name="files"/>
+      <div v-else>
+        <div v-if="detail.images" flex class="wrap imageList">
+          <ai-image v-for="file in detail.images" :key="file.id" :src="file.url" preview/>
+        </div>
+        <div v-else-if="detail.files" class="fileList">
+          <div v-for="file in detail.files" :key="file.id" flex>
+            <ai-image :src="file.url"/>
+            <div class="info">
+              <span>{{ file.name }} </span>
+              <i>{{ file.fileSizeStr }}</i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="comment" class="comments">
+
+    </div>
+  </section>
+</template>
+
+<script>
+import AiTopFixed from "./AiTopFixed";
+import AiImage from "./AiImage";
+
+export default {
+  name: "AiDetail",
+  components: {AiImage, AiTopFixed},
+  props: {
+    title: {default: ""},
+    detail: {default: () => ({})},
+    comment: Boolean
+  },
+  mounted() {
+    document.title = this.title
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDetail {
+  height: 100vh;
+
+  .header {
+    .title {
+      font-weight: bold;
+      font-size: 48px;
+    }
+
+    .bottomBar {
+      justify-content: space-between;
+      margin-top: 16px;
+      color: #999;
+
+      .u-icon + .u-icon {
+        margin-left: 32px;
+      }
+    }
+  }
+
+  .content, .files {
+    padding: 32px;
+    background: #fff;
+
+    &.content {
+      margin-bottom: 20px;
+    }
+  }
+
+  .imageList {
+    justify-content: space-around;
+
+    .AiImage {
+      margin-right: 8px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .fileList {
+    & > div {
+      margin-bottom: 8px;
+    }
+
+    .info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+
+      & > span {
+        flex: 1;
+        min-width: 0;
+      }
+
+      & > i {
+        flex-shrink: 0;
+      }
+    }
+
+  }
+}
+</style>