Merge branch 'main' into issue-80-前端接口设计

IdeaLeap · Jan 26, 2023 · 2bfba8d · 2bfba8d
2 parents 1702598 + 4a3ec88
commit 2bfba8d
Show file tree

Hide file tree

Showing 20 changed files with 1,120 additions and 562 deletions.
diff --git a/frontend/assets/themes.ts b/frontend/assets/themes.ts
diff --git a/frontend/components/ArticlesContent/End.vue b/frontend/components/ArticlesContent/End.vue
@@ -0,0 +1,112 @@
+<script setup>
+const props = defineProps({
+  type: {
+    type: Object,
+  },
+  tag: {
+    type: Object,
+  },
+})
+</script>
+
+<template lang="">
+  <div class="article-end">
+    <div class="tag-list-box">
+      <div class="tag-list">
+        <div class="tag-list-title">
+          分类：
+        </div>
+        <a href="/frontend" target="_blank" rel="" class="item category-item"><span class="tag-title">{{ props.type.type }}</span></a>
+      </div>
+      <div class="tag-list">
+        <div class="tag-list-title">
+          标签：
+        </div>
+        <div class="tag-list-container">
+          <a href="/tag/%E5%89%8D%E7%AB%AF" target="_blank" rel="" class="item tag-item"><span v-for="(item, index) in props.tag.data" :key="index" class="tag-title">{{ item.tag }}</span></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main-area .article-end {
+  padding-top: 10px;
+  border-radius: 0 0 4px 4px;
+  padding-bottom: 3.33rem;
+}
+.main-area > {
+  border-radius: 4px;
+  background-color: #fff;
+  padding-left: 2.67rem;
+  padding-right: 2.67rem;
+  box-sizing: border-box;
+}
+.tag-list-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: -12px;
+}
+.tag-list-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: -12px;
+}
+.tag-list-box .tag-list:first-child:not(:last-child) {
+  margin-right: 2.67rem;
+  flex-shrink: 0;
+}
+.tag-list-box .tag-list {
+  display: flex;
+  font-size: 1.167rem;
+  line-height: 2.286;
+}
+.tag-list-box .tag-list .tag-list-title {
+  flex-shrink: 0;
+  margin-right: 8px;
+  font-size: 14px;
+  color: #515767;
+}
+.tag-list-box .tag-list .item.category-item {
+  background-color: #f2f3f5;
+  color: #515767;
+}
+.tag-list-box .tag-list .item {
+  display: flex;
+  align-items: center;
+  margin: 0 0.667rem 1rem 0;
+  padding: 0 1rem;
+  border-radius: 4px;
+  transition: background-color 0.15s linear;
+}
+.tag-list-box .tag-list .tag-title {
+  white-space: nowrap;
+  line-height: 2.667rem;
+}
+
+.tag-list-box .tag-list .tag-list-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.tag-list-box .tag-list .item.tag-item {
+  background-color: #eaf2ff;
+  color: #1e80ff;
+}
+.tag-list-box .tag-list .item {
+  display: flex;
+  align-items: center;
+  margin: 0 0.667rem 1rem 0;
+  padding: 0 1rem;
+  border-radius: 4px;
+  transition: background-color 0.15s linear;
+}
+.tag-list-box .tag-list .item.tag-item:hover {
+  background-color: rgba(30, 128, 255, 0.16);
+}
+.tag-list-box .tag-list .item.category-item:hover {
+  background-color: #e4e6eb;
+}
+</style>
diff --git a/frontend/components/ArticlesContent/SideBar/Author.vue b/frontend/components/ArticlesContent/SideBar/Author.vue
@@ -0,0 +1,118 @@
+<script setup>
+const props = defineProps({
+  author: {
+    type: Object,
+  },
+})
+</script>
+
+<template>
+  <div class="sidebar-block author-block pure mb-20px">
+    <a href="#" target="_blank" rel class="user-item item pb-1.416rem"><img :src="props.author.avatar" alt="" class="lazy avatar" loading="lazy">
+      <div class="info-box">
+        <a href="#" target="_blank" rel class="username flex items-center"><span class="name" style="max-width: 128px"> {{ props.author.name }} </span>
+        </a>
+        <div :title="props.author.motto" class="position">
+          {{ props.author.motto }}
+        </div>
+      </div></a>
+  </div>
+</template>
+
+<style scoped>
+.sidebar-block {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+.author-block {
+  border-radius: 4px;
+  background: #fff;
+  padding: 1.667rem;
+}
+.item {
+  display: flex;
+  align-items: center;
+}
+a {
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: #909090;
+}
+.user-item .avatar {
+  flex: 0 0 auto;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+}
+.avatar {
+  display: inline-block;
+  position: relative;
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.lazy {
+  position: relative;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+img {
+  border-style: none;
+}
+.lazy:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: inherit;
+  border-radius: inherit;
+}
+.lazy:not(.immediate):before {
+  transition: opacity 0.2s;
+}
+.user-item .info-box {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-left: 1.333rem;
+}
+.user-item .info-box .username {
+  font-size: 1.333rem;
+  font-weight: 500;
+  line-height: 2rem;
+  color: #252933;
+  white-space: pre-wrap;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.username .name {
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.user-item .info-box .username {
+  font-size: 1.333rem;
+  font-weight: 500;
+  line-height: 2rem;
+  color: #252933;
+  white-space: pre-wrap;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.user-item .info-box .position {
+  margin-top: 4px;
+  font-size: 1.167rem;
+  color: #515767;
+  font-weight: 400;
+  line-height: 22px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>