feat: 完善基础页面

2023-03-10 22:02:19 +08:00
parent 30ab479315
commit 733ff867e9
385 changed files with 1815 additions and 45473 deletions
--- a/Yi.BBS.Vue3/src/components/AvatarInfo.vue
+++ b/Yi.BBS.Vue3/src/components/AvatarInfo.vue
@@ -1,43 +1,70 @@
 <template >
+    <div class="avatar">
+        <div class="avatar-left">
+            <el-avatar :size="props.size" :src="props.src ?? '/src/assets/logo.ico'" />
+
+            <div>
+                <div class="nick" :class="{mt_1: props.time!='undefined'}"> 大白子</div>
+                <div class="remarks" v-if="props.time"> {{props.time}}</div>
+                <div class="remarks">  <slot name="bottom" /></div>
+            </div>
+
+            <div class="info">
+                <el-tag class="ml-2" type="warning">V6</el-tag>
+                <el-tag class="ml-2" type="danger">管理员</el-tag>
+            </div>
+        </div>
+        
+        <el-button v-if="props.showWatching" type="primary" size="default" icon="Plus">关注</el-button>

-<div class="avatar">
-    <div class="avatar-left">
-        <el-avatar :size="props.size" />
-         <div>
-       <div> 大白子</div>
-       <div class="remarks"> 2022-03-05 23:33:20</div>
    </div>
-    </div>
-
-    <el-button type="primary" size="default" icon="Plus" >关注</el-button>
-
-</div>
 </template>
 <script setup>
-const props = defineProps(['size'])
+import { onMounted } from 'vue';
+
+const props = defineProps(['size', 'src','showWatching','time'])
+onMounted(()=>{
+console.log(props.time,"props.time");})
 </script>
 <style scoped>
-.el-icon
+.mt_1
 {
-color: white;
+  margin-top: 0.5rem;  
+}
+.nick
+{
+    font-weight:bold;
+}
+.info
+{
+    margin-top: 0.6rem;
+    margin-left: 1rem;
+}
+.info .el-tag
+{
+    margin-right:1rem;
+}
+.el-icon {
+    color: white;

 }
-.avatar
-{
+
+.avatar {
    display: flex;
-    justify-content:space-between;
+    justify-content: space-between;
 }
-.avatar-left
-{
+
+.avatar-left {
    display: flex;
-    justify-content:flex-start;
+    justify-content: flex-start;
+    align-items: center;
 }
-.el-avatar
-{
+
+.el-avatar {
    margin-right: 1.2rem;
 }
-.remarks
-{
+
+.remarks {
    padding-top: 0.5rem;
    color: #8C8C8C;
 }
--- a/Yi.BBS.Vue3/src/components/DisscussCard.vue
+++ b/Yi.BBS.Vue3/src/components/DisscussCard.vue
@@ -2,10 +2,7 @@
    <el-card class="box-card" shadow="never">

        <div class="card-header">
-            <el-avatar :size="50" />
-            <span class="ml-2">你好</span>
-            <el-tag class="ml-2" type="warning">V6</el-tag>
-            <el-tag class="ml-2" type="danger">管理员</el-tag>
+          <AvatarInfo />
        </div>


@@ -37,6 +34,7 @@
 <script setup>
 import { h, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import AvatarInfo from './AvatarInfo.vue';
 const router = useRouter()
 const spacer = h(ElDivider, { direction: 'vertical' })
 const enterDiscuss = () => {
--- a/Yi.BBS.Vue3/src/components/InfoCard.vue
+++ b/Yi.BBS.Vue3/src/components/InfoCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'

-const props = defineProps(['items','header','text'])
+const props = defineProps(['items','header','text','hideDivider'])

 </script>

@@ -21,7 +21,7 @@ const props = defineProps(['items','header','text'])
      <div class="text item">
        <slot name="item" v-bind="item"/>
    </div>
-        <el-divider v-if="i!=props.items.length-1"  />
+        <el-divider v-if="i!=props.items.length-1&&hideDivider==undefined"  />
  </div>
   
    </el-card>
--- a/Yi.BBS.Vue3/src/components/MavonEdit.vue
+++ b/Yi.BBS.Vue3/src/components/MavonEdit.vue
@@ -1,52 +1,31 @@
 <template>
-  <mavon-editor
-    previewBackground="#ffffff"
-    v-model="content"
-    ref="md"
-    @imgAdd="imgAdd"
-    @change="change"
-    :ishljs="true"
-    codeStyle="atelier-cave-dark"
-    :style="{'height': props.height+'px', 'z-index': props.z-index}"
-    :externalLink="externalLink"
-  />
+  <mavon-editor 
+  :subfield="subfield" 
+  :codeStyle="props.codeStyle" 
+  :ishljs="true"
+  :style="{minHeight:props.height,maxHeight:'50rem'}"
+  class="edit"
+  @change="change"
+  ></mavon-editor>
 </template>
-  <script setup>
-import { mavonEditor } from "mavon-editor";
-import "mavon-editor/dist/css/index.css";
-import axios from "axios";
-import { ref } from "vue";
-const props = defineProps(["text", "height",'z-index']);
-const content = ref("");
-const externalLink = {
-  markdown_css: function () {
-    // 这是你的markdown css文件路径
-    return "/mavon-editor/markdown/github-markdown.min.css";
-  },
-  hljs_js: function () {
-    // 这是你的hljs文件路径
-    return "/mavon-editor/highlightjs/highlight.min.js";
-  },
-  hljs_css: function (css) {
-    // 这是你的代码高亮配色文件路径
-    return "/mavon-editor/highlightjs/styles/" + css + ".min.css";
-  },
-  hljs_lang: function (lang) {
-    // 这是你的代码高亮语言解析路径
-    return "/highlightjs/languages/" + lang + ".min.js";
-  },
-  katex_css: function () {
-    // 这是你的katex配色方案路径路径
-    return "/mavon-editor/katex/katex.min.css";
-  },
-  katex_js: function () {
-    // 这是你的katex.js路径
-    return "/mavon-editor/katex/katex.min.js";
-  },
-};
+<script setup>
+// Local Registration
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+import { ref } from 'vue';
+const props = defineProps(['height','modelValue',"codeStyle"])
+const emit=defineEmits(['update:modelValue'])
+const subfield = true;
+const change=(value ,render)=>
+{
+  emit('update:modelValue', render)
+}

-const imgAdd = (pos, file) => {};
-const change = (value, render) => {
-  this.myhtml2 = value;
-};
-</script>
+</script>
+<style scoped>
+.edit
+{
+
+  width: 100%;
+}
+</style>
--- a/Yi.BBS.Vue3/src/layout/AppHeader.vue
+++ b/Yi.BBS.Vue3/src/layout/AppHeader.vue
@@ -6,26 +6,26 @@
    @select="handleSelect"
    
  >
-  <RouterLink to="/index">  <el-menu-item class="logo" @click="enterIndex">   
-    <img class="img-icon" style="width: 35px; height: 35px" src="@/assets/logo.ico"  /> 白了又白</el-menu-item></RouterLink> 
-  <RouterLink to="/index"><el-menu-item index="1" @click="enterIndex">主页</el-menu-item></RouterLink>
+  <RouterLink to="/index">  <el-menu-item class="logo">   
+    <img class="img-icon" style="width: 35px; height: 35px" src="@/assets/logo.ico"  />Yi意社区</el-menu-item></RouterLink> 
+  <RouterLink to="/index"><el-menu-item index="1">主页</el-menu-item></RouterLink>
    <el-sub-menu index="2">
      <template #title>学习</template>
-      <el-menu-item index="2-1">item one</el-menu-item>
-      <el-menu-item index="2-2">item two</el-menu-item>
-      <el-menu-item index="2-3">item three</el-menu-item>
+      <el-menu-item index="2-1">学习 one</el-menu-item>
+      <el-menu-item index="2-2">学习 two</el-menu-item>
+      <el-menu-item index="2-3">学习 three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>资源</template>
-      <el-menu-item index="3-1">item one</el-menu-item>
-      <el-menu-item index="3-2">item two</el-menu-item>
-      <el-menu-item index="3-3">item three</el-menu-item>
+      <el-menu-item index="3-1">资源 one</el-menu-item>
+      <el-menu-item index="3-2">资源 two</el-menu-item>
+      <el-menu-item index="3-3">资源 three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>问答</template>
-      <el-menu-item index="4-1">item one</el-menu-item>
-      <el-menu-item index="4-2">item two</el-menu-item>
-      <el-menu-item index="4-3">item three</el-menu-item>
+      <el-menu-item index="4-1">问答 one</el-menu-item>
+      <el-menu-item index="4-2">问答 two</el-menu-item>
+      <el-menu-item index="4-3">问答 three</el-menu-item>
    </el-sub-menu>

    <div class="flex-grow" />
@@ -34,9 +34,9 @@
    <RouterLink to="/addArt"><el-menu-item index="6">分享</el-menu-item></RouterLink>
    <el-sub-menu index="7">
      <template #title>学习</template>
-      <el-menu-item index="7-1">item one</el-menu-item>
-      <el-menu-item index="7-2">item two</el-menu-item>
-      <el-menu-item index="7-3">item three</el-menu-item>
+      <el-menu-item index="7-1">学习 one</el-menu-item>
+      <el-menu-item index="7-2">学习 two</el-menu-item>
+      <el-menu-item index="7-3">学习 three</el-menu-item>
    </el-sub-menu>
  </el-menu>

--- a/Yi.BBS.Vue3/src/utils/hljsData.js
+++ b/Yi.BBS.Vue3/src/utils/hljsData.js
@@ -0,0 +1,81 @@
+export default {
+    'agate': 1,
+    'androidstudio': 1,
+    'arduino-light': 1,
+    'arta': 1,
+    'ascetic': 1,
+    'atelier-cave-dark': 1,
+    'atelier-cave-light': 1,
+    'atelier-dune-dark': 1,
+    'atelier-dune-light': 1,
+    'atelier-estuary-dark': 1,
+    'atelier-estuary-light': 1,
+    'atelier-forest-dark': 1,
+    'atelier-forest-light': 1,
+    'atelier-heath-dark': 1,
+    'atelier-heath-light': 1,
+    'atelier-lakeside-dark': 1,
+    'atelier-lakeside-light': 1,
+    'atelier-plateau-dark': 1,
+    'atelier-plateau-light': 1,
+    'atelier-savanna-dark': 1,
+    'atelier-savanna-light': 1,
+    'atelier-seaside-dark': 1,
+    'atelier-seaside-light': 1,
+    'atelier-sulphurpool-dark': 1,
+    'atelier-sulphurpool-light': 1,
+    'atom-one-dark': 1,
+    'atom-one-light': 1,
+    'brown-paper': 1,
+    'codepen-embed': 1,
+    'color-brewer': 1,
+    'darcula': 1,
+    'dark': 1,
+    'darkula': 1,
+    'default': 1,
+    'docco': 1,
+    'dracula': 1,
+    'far': 1,
+    'foundation': 1,
+    'github-gist': 1,
+    'github': 1,
+    'googlecode': 1,
+    'grayscale': 1,
+    'gruvbox-dark': 1,
+    'gruvbox-light': 1,
+    'hopscotch': 1,
+    'hybrid': 1,
+    'idea': 1,
+    'ir-black': 1,
+    'kimbie.dark': 1,
+    'kimbie.light': 1,
+    'magula': 1,
+    'mono-blue': 1,
+    'monokai-sublime': 1,
+    'monokai': 1,
+    'obsidian': 1,
+    'ocean': 1,
+    'paraiso-dark': 1,
+    'paraiso-light': 1,
+    'pojoaque': 1,
+    'purebasic': 1,
+    'qtcreator_dark': 1,
+    'qtcreator_light': 1,
+    'railscasts': 1,
+    'rainbow': 1,
+    'routeros': 1,
+    'school-book': 1,
+    'solarized-dark': 1,
+    'solarized-light': 1,
+    'sunburst': 1,
+    'tomorrow-night-blue': 1,
+    'tomorrow-night-bright': 1,
+    'tomorrow-night-eighties': 1,
+    'tomorrow-night': 1,
+    'tomorrow': 1,
+    'vs': 1,
+    'vs2015': 1,
+    'xcode': 1,
+    'xt256': 1,
+    'zenburn': 1
+};
--- a/Yi.BBS.Vue3/src/views/AddArticle.vue
+++ b/Yi.BBS.Vue3/src/views/AddArticle.vue
@@ -3,7 +3,12 @@
        <el-form  label-width="120px" label-position="left">

    <el-form-item label="分类：">
-      <el-input  placeholder="请输入" />
+      <el-radio-group v-model="radio">
+      <el-radio-button label="1" >文章</el-radio-button>
+      <el-radio-button label="2"  >主题</el-radio-button>
+      <el-radio-button label="3"  >板块</el-radio-button>
+      <el-radio-button label="4" >其他</el-radio-button>
+    </el-radio-group>
    </el-form-item>
    <el-form-item label="标题：">
      <el-input  placeholder="请输入" />
@@ -13,10 +18,9 @@
    </el-form-item>
    <el-form-item label="内容：">
    
-<MavonEdit />
-
+<MavonEdit height="30rem" v-model="text" :codeStyle="codeStyle"/>
    </el-form-item>
-    <el-form-item label="分面：">
+    <el-form-item label="封面：">
      <el-input placeholder="请输入" />
    </el-form-item>
    <el-form-item label="标签：">
@@ -28,7 +32,10 @@
 </template>
 <script setup>
 import MavonEdit from '@/components/MavonEdit.vue'
-
+import { ref } from 'vue';
+const text=ref("")
+const radio=ref(1)
+const codeStyle=ref("atom-one-dark");
 </script>
 <style scoped>
 .submit-btn
@@ -42,4 +49,5 @@ import MavonEdit from '@/components/MavonEdit.vue'
    margin: 1.5rem;
    padding: 1.5rem;
 }
+
 </style>
--- a/Yi.BBS.Vue3/src/views/Article.vue
+++ b/Yi.BBS.Vue3/src/views/Article.vue
@@ -3,16 +3,16 @@
        <el-col :span="17">

            <el-row class="left-div">
-                <el-col :span="24" >
-                   <AvatarInfo :size="50"></AvatarInfo>
+                <el-col :span="24">
+                    <AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>

                    <el-divider />
                    <h2>面试题挑战</h2>
                    文章详情
-         

-                    <el-divider  class="tab-divider" />
-                  
+
+                    <el-divider class="tab-divider" />
+

                    <el-space :size="10" :spacer="spacer">
                        <el-button icon="Pointer" text>
@@ -21,7 +21,7 @@
                            0</el-button>
                        <el-button icon="Share" text>
                            分享</el-button>
-                         <el-button icon="Operation" text>
+                        <el-button icon="Operation" text>
                            操作</el-button>
                    </el-space>

@@ -37,14 +37,54 @@
        <el-col :span="7">
            <el-row class="right-div">
                <el-col :span="24">
+                    <InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
+                        <template #content>
+                            <div>
+                                <ul class="art-info-ul">
+                                    <li>
+                                        分类： <span>文章</span>
+                                    </li>
+                                    标签： <el-tag type="success">文章</el-tag>
+                                    <el-tag type="info">资源</el-tag>
+                                </ul>
+                            </div>
+                        </template>
+                    </InfoCard>
                </el-col>
                <el-col :span="24">
+                    <InfoCard class="art-info-right" header="目录" hideDivider="true">
+                        <template #content>
+                            <div>
+                                <ul class="art-info-ul">
+                                    <li v-for="i in 6">
+                                        <el-button style="width: 100%;
+                                          justify-content: left" :key="你好" type="primary" text>{{i}}：第一小结</el-button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </template>
+                    </InfoCard>
                </el-col>
                <el-col :span="24">
+                    <InfoCard :items=items header="推荐好友" text="更多">
+                        <template #item="temp">
+                            <AvatarInfo />
+                        </template>
+                    </InfoCard>
                </el-col>
                <el-col :span="24">
+                    <InfoCard :items=items header="推荐好友" text="更多">
+                        <template #item="temp">
+                            <AvatarInfo />
+                        </template>
+                    </InfoCard>
                </el-col>
                <el-col :span="24">
+                    <InfoCard :items=items header="推荐好友" text="更多">
+                        <template #item="temp">
+                            <AvatarInfo />
+                        </template>
+                    </InfoCard>
                </el-col>
            </el-row>
        </el-col>
@@ -53,9 +93,32 @@
 <script setup>
 import { h, ref } from 'vue'
 import AvatarInfo from '@/components/AvatarInfo.vue'
+import InfoCard from '../components/InfoCard.vue';
 const spacer = h(ElDivider, { direction: 'vertical' })
+const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
 </script>
 <style scoped >
+.art-info-ul span {
+    margin-left: 1rem;
+}
+
+.art-info-ul .el-tag {
+    margin-left: 1rem;
+}
+
+.art-info-ul {
+    padding: 0;
+}
+
+li {
+    list-style: none;
+    margin-bottom: 1rem;
+}
+
+.art-info-right {
+    height: 100%;
+}
+
 .left-div .el-col {
    background-color: #FFFFFF;
    min-height: 12rem;
@@ -98,13 +161,14 @@ h2 {
    padding: 1.4rem 1.4rem 0.5rem 1.4rem;

 }
+
 .el-space {
-    display: flex ;
-    vertical-align: top ;
-    justify-content: space-evenly ;
+    display: flex;
+    vertical-align: top;
+    justify-content: space-evenly;
 }
-.tab-divider
-{
+
+.tab-divider {
    margin-bottom: 0.5rem;
 }
 </style>
--- a/Yi.BBS.Vue3/src/views/Index.vue
+++ b/Yi.BBS.Vue3/src/views/Index.vue
@@ -1,5 +1,4 @@
 <template >
-
  <el-row :gutter="20" class="top-div" >

    <el-col :span="17">
@@ -36,9 +35,13 @@
        </el-col>

        <el-col :span="24" >
-         <InfoCard  header="用户" text="详情">
-          <template #content>
-            你好啊。好兄弟
+         <InfoCard  header="简介" text="详情">
+          <template #content >
+            <div class="introduce">
+
+              没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的最求
+            </div>
+       
          </template>
          </InfoCard>
        </el-col>
@@ -46,7 +49,12 @@
        <el-col :span="24" >
          <InfoCard :items=items  header="本月排行" text="更多">
           <template #item="temp">
-          {{temp}}
+            <AvatarInfo>
+<template #bottom>
+  本月积分：680
+</template>
+              
+            </AvatarInfo>
           </template>
           </InfoCard>
         </el-col>
@@ -55,7 +63,7 @@
         <el-col :span="24" >
          <InfoCard :items=items  header="推荐好友" text="更多">
           <template #item="temp">
-          {{temp}}
+            <AvatarInfo/>
           </template>
           </InfoCard>
         </el-col>
@@ -77,9 +85,15 @@ import DisscussCard from '@/components/DisscussCard.vue'
 import InfoCard from '@/components/InfoCard.vue'
 import PlateCard from '@/components/PlateCard.vue'
 import ScrollbarInfo from '@/components/ScrollbarInfo.vue'
+import AvatarInfo from '@/components/AvatarInfo.vue'
 const items=[{user:"用户1"},{user:"用户2"},{user:"用户3"}]
 </script>
 <style scoped >
+.introduce
+{
+color: rgba(0,0,0,.45);
+font-size: small;
+}
 .plate
 {
  background: transparent !important;