feat: 完善基础页面

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;
 }

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 = () => {

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>

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>