搜索结果列表页面开发

2025-03-12 18:41:20 +08:00
commit 7cebe8fc00
739 changed files with 88149 additions and 0 deletions
--- a/src/components/InfoLeft/README.md
+++ b/src/components/InfoLeft/README.md
@@ -0,0 +1,33 @@
+# infoLeft组件
+
+### 说明
+- 通用的头部信息显示组件，demo如下
+
+``` js
+import InfoLeft from '@/components/InfoLeft/index.vue';
+
+const imgUrl = '';
+const infoText = '';
+const infoSubText = '';
+const clickFun = ()=>{
+    
+}
+
+<InfoLeft :imgUrl="imgUrl" :infoText="infoText" :infoSubText="infoSubText" @click="clickFun" />
+```
+
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| imgUrl       | 图片路径    | string                | -        | -         |
+| infoText       | 主标题    | string                | -        | -         |
+| infoSubText       | 副标题    | string                | -        | -         |
+
+### Emits
+
+注意：以下事件都是组件内部对应的按钮点击触发，如果用插槽自定义对应区域的内容的话，事件自行监听即可
+
+| 方法        | 说明     | 返回值                   |
+|-----------|--------|-----------------------|
+| click   | 关注按钮点击事件     |  无    |
--- a/src/components/InfoLeft/index.vue
+++ b/src/components/InfoLeft/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="infoLeft flex" v-if="infoText">
+    <GAvatar v-if="!isMobile" :class="!imgUrl ? 'avatar' : 'avatar1'" :src="imgUrl" :name="infoText" :width="20" :height="20"
+      :is_round="isRound">
+    </GAvatar>
+    <span class="info-span info-noline max-w-[200px]">{{ infoText }}</span>
+    <span v-if="infoSubText" class="info-subtext info-noline max-w-[200px]"
+      :style="userDashBoard ? 'margin-right:8px;' : ''">{{ infoSubText
+      }}</span>
+    <d-button class="follow ml-[16px]" size="sm" @click="handleClick">{{ isFollow ? '已关注' : '关注' }}</d-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePageResize } from '@/utils/hooks/usePageResize';
+
+const { isMobile } = usePageResize();
+
+interface IProps {
+  // 声明props内容
+  imgUrl?: string,
+  infoText?: string,
+  infoSubText?: string,
+  isRound: boolean,
+  userDashBoard?: boolean;
+  isFollow?: boolean
+}
+const props = defineProps<IProps>();
+const emit = defineEmits(['followClick']);
+const handleClick = () => {
+  emit('followClick', props.isFollow);
+};
+</script>
+
+<style lang="scss" scoped>
+.infoLeft {
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  .avatar {
+    :deep(.devui-avatar--style) {
+      border: 0.5px solid #d3d3d3;
+    }
+  }
+
+  .avatar1 {
+    border: 0.5px solid #d3d3d3;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .info-span {
+    flex: 1;
+    margin-left: 16px;
+    font-size: var(--text-sm);
+    font-weight: bold;
+    color: var(--color-G900);
+    line-height: 20px;
+    max-width: 200px;
+  }
+
+  .info-subtext {
+    margin-left: 8px;
+    font-size: var(--text-sm);
+    font-weight: 400;
+    color: var(--color-G700);
+    line-height: 20px;
+  }
+}
+
+.info-noline {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 1000px) {
+  .infoLeft {
+    width: 100%;
+    padding: 3px 20px;
+    justify-content: space-between;
+
+    .info-span {
+      font-size: var(--text-base);
+      margin-left: 0;
+      line-height: 24px;
+    }
+  }
+}
+</style>