⚡️ 完善组件样式 #64

*优化换行符渲染
*增加网页活动识别
*调整折叠文本样式
*限制最大宽度而非写死宽度

src/components/post/tp-image.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="mys-post-div">
+  <div class="tp-image-box">
     <img
-      class="mys-post-img"
+      :style="getImageStyle()"
       :src="props.data.insert.image"
       :alt="props.data.insert.image"
-      :title="props.data.insert.image"
+      :title="getImageTitle()"
     />
   </div>
 </template>
 <script lang="ts" setup>
+import { StyleValue, toRaw } from "vue";
+
+import { bytesToSize } from "../../utils/toolFunc";
+
 interface TpImage {
   insert: {
     image: string;
@@ -16,8 +20,9 @@ interface TpImage {
   attributes?: {
     width: number;
     height: number;
-    size: number | undefined;
-    ext: string | undefined;
+    size?: number;
+    ext?: "png" | "jpg"; // 待补充
+    align?: "center"; // 待补充
   };
 }
 
@@ -26,4 +31,42 @@ interface TpImageProps {
 }
 
 const props = defineProps<TpImageProps>();
+
+console.log("tp-image", props.data.insert.image, toRaw(props.data).attributes);
+
+function getImageStyle(): StyleValue {
+  let style: StyleValue = <Array<StyleValue>>[];
+  if (props.data.attributes == undefined) return style;
+  if (props.data.attributes.width < 800) {
+    const widthFullRule: StyleValue = "width: 100%";
+    style.push(widthFullRule);
+  }
+  return style;
+}
+
+function getImageTitle(): string {
+  if (props.data.attributes == undefined) return "";
+  const res: string[] = [];
+  res.push(`宽度：${props.data.attributes.width}px`);
+  res.push(`高度：${props.data.attributes.height}px`);
+  if (props.data.attributes.size) {
+    const size = bytesToSize(props.data.attributes.size);
+    res.push(`大小：${size}`);
+  }
+  if (props.data.attributes.ext) {
+    res.push(`格式：${props.data.attributes.ext}`);
+  }
+  return res.join("\n");
+}
 </script>
+<style lang="css" scoped>
+.tp-image-box {
+  margin: 10px auto;
+}
+
+.tp-image-box img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+</style>