feat(组件): 优化移动端分享功能并调整样式

调整推荐和精华图标高度为25px
为移动端添加点击分享直接复制链接功能
修复itemBottom组件中itemvalue拼写错误
添加响应式布局样式适配不同屏幕尺寸

component/item-bottom/item-bottom.js

@@ -17,9 +17,12 @@ export const itemBottom = defineComponent({
     setup(props) {
         let valueUrl = ref("");
 
+        let isMobile = ref(false)
+
         onMounted(() => {
             const valueA = document.querySelector(".valueA");
             valueUrl.value = valueA.innerText;
+            isMobile.value = window.isMobile
         });
 
         let item = ref({ ...props.itemdata });
@@ -47,7 +50,7 @@ export const itemBottom = defineComponent({
 
             const token = item.value.token || "";
 
-            if (["offer", "offer_summary", "interviewexperience"].includes(item.value["type"]) && item.value["is_like"]) {
+            if (["offer", "offer_summary", "interviewexperience"].includes(itemvalue["type"]) && item.value["is_like"]) {
                 creationAlertBox("error", "不可取消点赞");
                 return;
             }
@@ -108,9 +111,7 @@ export const itemBottom = defineComponent({
                 });
         };
 
-        const copyLinkClick = () => {
-            copyForumUid(`${location.origin}/details/${item.value.uniqid}`);
-        };
+        const copyLinkClick = () => copyForumUid(`${location.origin}/details/${item.value.uniqid}`);
 
         let QRcode = ref("");
         const showQRcode = () => {
@@ -146,12 +147,12 @@ export const itemBottom = defineComponent({
 
         const shareBoxRef = ref(null);
 
-        return { valueUrl, isright, shareBoxRef, share, QRcode, showQRcode, copyLinkClick, collectClick, item, likeClick, isLogin, isLikeGif };
+        return { isMobile, valueUrl, isright, shareBoxRef, share, QRcode, showQRcode, copyLinkClick, collectClick, item, likeClick, isLogin, isLikeGif };
     },
 
     components: {
         like,
     },
 
-    template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank">    <img class="icon" :src="item?.commentreviews?.avatar" />    <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0">    <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank">        <img class="icon" :src="item.avatar" />        <div class="text one-line-display">{{ item.content || "[图]" }}</div>    </a></template><div class="bottom flexacenter">    <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'">        <img v-if="item.is_like" class="icon" :src="valueUrl + '/img/like-red-icon.png'" />        <img v-else class="icon" :src="valueUrl + '/img/like-icon.png'" />        <div class="text">{{ item.likes || "赞" }}</div>    </div>    <div class="bottom-item flexacenter" @click="collectClick()">        <img v-if="item.is_collect" class="icon" :src="valueUrl + '/img/collect-golden.svg'" />        <img v-else class="icon" :src="valueUrl + '/img/collect-gray.png'" />        <div class="text">{{ item.collections || "收藏" }}</div>    </div>    <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank">        <img class="icon" :src="valueUrl + '/img/discuss-icon.png'" />        <div class="text">{{ item.comments || "讨论" }}</div>    </a>    <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank">        <img class="icon" :src="valueUrl + '/img/bi-copper-icon.png'" />        <div class="text">{{ item.coins || "投币" }}</div>    </a>    <!-- 鼠标移入事件 -->    <div class="bottom-item share flexacenter" @mouseenter="share">        <img class="icon" :src="valueUrl + '/img/share-gray.png'" style="width: 19px; height: 19px;" />        <div class="text">{{ item.shares || '转发'}}</div>        <div class="share-box flexcenter" ref="shareBoxRef">            <div class="share-item flexcenter" @click="copyLinkClick()">                <img class="share-icon" :src="valueUrl + '/img/copy-black-icon.png'" />                <div class="text">复制链接</div>            </div>            <!-- 鼠标移入 加载二维码 -->            <div class="share-item wenxin flexcenter" @mouseenter="showQRcode">                <img class="share-icon" :src="valueUrl + '/img/weixin-icon.png'" />                <div class="text">微信转发</div>                <div class="QRcode-box flexcenter" :class="{'right': isright}">                    <img v-if="QRcode" class="QRcode" :src="QRcode" />                    <div v-else class="QRcode flexcenter">                        <img class="load" :src="valueUrl + '/img/load-icon.svg'" />                    </div>                    <div class="text">微信扫码</div>                </div>            </div>        </div>    </div></div><like v-if="isLikeGif"></like>`,
+    template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank">    <img class="icon" :src="item?.commentreviews?.avatar" />    <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0">    <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank">        <img class="icon" :src="item.avatar" />        <div class="text one-line-display">{{ item.content || "[图]" }}</div>    </a></template><div class="bottom flexacenter">    <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'">        <img v-if="item.is_like" class="icon" :src="valueUrl + '/img/like-red-icon.png'" />        <img v-else class="icon" :src="valueUrl + '/img/like-icon.png'" />        <div class="text">{{ item.likes || "赞" }}</div>    </div>    <div class="bottom-item flexacenter" @click="collectClick()">        <img v-if="item.is_collect" class="icon" :src="valueUrl + '/img/collect-golden.svg'" />        <img v-else class="icon" :src="valueUrl + '/img/collect-gray.png'" />        <div class="text">{{ item.collections || "收藏" }}</div>    </div>    <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank">        <img class="icon" :src="valueUrl + '/img/discuss-icon.png'" />        <div class="text">{{ item.comments || "讨论" }}</div>    </a>    <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank">        <img class="icon" :src="valueUrl + '/img/bi-copper-icon.png'" />        <div class="text">{{ item.coins || "投币" }}</div>    </a>    <!-- 鼠标移入事件 -->    <div class="bottom-item share flexacenter" @mouseenter="share" @click="isMobile ? copyLinkClick() : ''">        <img class="icon" :src="valueUrl + '/img/share-gray.png'" style="width: 19px; height: 19px;" />        <div class="text">{{ item.shares || '转发'}}</div>        <div class="share-box flexcenter" ref="shareBoxRef">            <div class="share-item flexcenter" @click="copyLinkClick()">                <img class="share-icon" :src="valueUrl + '/img/copy-black-icon.png'" />                <div class="text">复制链接</div>            </div>            <!-- 鼠标移入 加载二维码 -->            <div class="share-item wenxin flexcenter" @mouseenter="showQRcode">                <img class="share-icon" :src="valueUrl + '/img/weixin-icon.png'" />                <div class="text">微信转发</div>                <div class="QRcode-box flexcenter" :class="{'right': isright}">                    <img v-if="QRcode" class="QRcode" :src="QRcode" />                    <div v-else class="QRcode flexcenter">                        <img class="load" :src="valueUrl + '/img/load-icon.svg'" />                    </div>                    <div class="text">微信扫码</div>                </div>            </div>        </div>    </div></div><like v-if="isLikeGif"></like>`,
 });

component/item-bottom/item-bottom.txt

@@ -32,7 +32,7 @@
     </a>
 
     <!-- 鼠标移入事件 -->
-    <div class="bottom-item share flexacenter" @mouseenter="share">
+    <div class="bottom-item share flexacenter" @mouseenter="share" @click="isMobile ? copyLinkClick() : ''">
         <img class="icon" :src="valueUrl + '/img/share-gray.png'" style="width: 19px; height: 19px;" />
         <div class="text">{{ item.shares || '转发'}}</div>
         <div class="share-box flexcenter" ref="shareBoxRef">

component/item-head/item-head.js

@@ -167,5 +167,5 @@ export const itemHead = defineComponent({
         report,
     },
 
-    template: `<div class="item-head flexacenter" ref="itemHead">    <div class="user-box flexacenter" @click="goPersonalHomepage(item?.user?.uniqid)">        <img class="avatar" :src="item?.user?.avatar || item.avatar" />        <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div>        <img class="group" v-if="item.user?.groupimage" :src="item.user?.groupimage" />    </div>    <div class="time">{{ timestamp }}</div>    <div class="flex1"></div>    <div class="circlePen flexcenter" @click="openedit(item.type)" v-if="page == 'edit' && (item.type == 'offer' || item.type == 'offer_summary')">        <img class="icon" :src="valueUrl + '/img/pen-icon.png'" />    </div>    <div class="flexacenter" style="position: relative;">        <div class="anonymous-box flexcenter" @click.stop="cutAnonymous" v-if="page == 'edit' && (item.type == 'vote' || item.type == 'interviewexperience')">            <span v-if="item.anonymous == 0">公开</span>            <span v-else>匿名</span>        </div>        <!-- 是否 公开发表 -->        <template v-if="anonymousState">            <div class="mask" @click.stop="cutAnonymous"></div>            <div class="isPublicityBox">                <div class="isPublicity-item" :class="{'green': item.anonymous == 0}" @click.stop="cutAnonymousState(0)">公开发表                    <img v-if="item.anonymous == 0" class="isPublicityIcon" :src="valueUrl + '/img/u1829.svg'"></image>                </div>                <div class="isPublicity-item" :class="{'green': item.anonymous != 0}" @click.stop="cutAnonymousState(1)">匿名发表                    <img v-if="item.anonymous != 0" class="isPublicityIcon" :src="valueUrl + '/img/u1829.svg'"></image>                </div>            </div>        </template>    </div>    <div class="view flexacenter">        <img class="icon" :src="valueUrl + '/img/eye-icon.svg'" />        <div class="text">{{ item.views }}</div>    </div>    <div v-if="item.type != 'tenement'" class="btn flexcenter" @click.stop="cutShow">        <img class="icon" :src="valueUrl + '/img/dot-dot-dot-gray.png'" />    </div>    <div v-if="show">        <div class="mask" @click.stop="cutShow"></div>        <div class="operate">            <div class="item" @click.stop="report">举报</div>            <template v-if="ismanager">                <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div>                <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div>                <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div>            </template>            <template v-if="item.type == 'thread' && item.ismyself">                <div class="item" @click.stop="edit">编辑</div>                <div class="item" @click.stop="deleteItem">删除</div>            </template>            <div class="item" v-if="page == 'edit' && item.type == 'vote'" @click.stop="deleteItem">删除</div>        </div>    </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1">    <a class="item icon" v-if="item.recommend == 1 && item.best != 1" target="_blank" href="/recommend">        <img style="height: 24px;" :src="valueUrl + '/img/recommend-icon.png'" />    </a>    <a class="item icon" v-if="item.best == 1" target="_blank" href="/best">        <img style="height: 24px;" v-if="item.best == 1" :src="valueUrl + '/img/essence-icon.png'" />    </a>    <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'/section/' + item.uniqid" target="_blank">{{ item.name }}</a>    <a class="item" v-for="(item, index) in tags" :key="item" :href="'/tag/' + item" target="_blank">{{ item }}</a></div><report v-if="reportState" :itemdata="item"></report>`,
+    template: `<div class="item-head flexacenter" ref="itemHead">    <div class="user-box flexacenter" @click="goPersonalHomepage(item?.user?.uniqid)">        <img class="avatar" :src="item?.user?.avatar || item.avatar" />        <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div>        <img class="group" v-if="item.user?.groupimage" :src="item.user?.groupimage" />    </div>    <div class="time">{{ timestamp }}</div>    <div class="flex1"></div>    <div class="circlePen flexcenter" @click="openedit(item.type)" v-if="page == 'edit' && (item.type == 'offer' || item.type == 'offer_summary')">        <img class="icon" :src="valueUrl + '/img/pen-icon.png'" />    </div>    <div class="flexacenter" style="position: relative;">        <div class="anonymous-box flexcenter" @click.stop="cutAnonymous" v-if="page == 'edit' && (item.type == 'vote' || item.type == 'interviewexperience')">            <span v-if="item.anonymous == 0">公开</span>            <span v-else>匿名</span>        </div>        <!-- 是否 公开发表 -->        <template v-if="anonymousState">            <div class="mask" @click.stop="cutAnonymous"></div>            <div class="isPublicityBox">                <div class="isPublicity-item" :class="{'green': item.anonymous == 0}" @click.stop="cutAnonymousState(0)">公开发表                    <img v-if="item.anonymous == 0" class="isPublicityIcon" :src="valueUrl + '/img/u1829.svg'"></image>                </div>                <div class="isPublicity-item" :class="{'green': item.anonymous != 0}" @click.stop="cutAnonymousState(1)">匿名发表                    <img v-if="item.anonymous != 0" class="isPublicityIcon" :src="valueUrl + '/img/u1829.svg'"></image>                </div>            </div>        </template>    </div>    <div class="view flexacenter">        <img class="icon" :src="valueUrl + '/img/eye-icon.svg'" />        <div class="text">{{ item.views }}</div>    </div>    <div v-if="item.type != 'tenement'" class="btn flexcenter" @click.stop="cutShow">        <img class="icon" :src="valueUrl + '/img/dot-dot-dot-gray.png'" />    </div>    <div v-if="show">        <div class="mask" @click.stop="cutShow"></div>        <div class="operate">            <div class="item" @click.stop="report">举报</div>            <template v-if="ismanager">                <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div>                <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div>                <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div>            </template>            <template v-if="item.type == 'thread' && item.ismyself">                <div class="item" @click.stop="edit">编辑</div>                <div class="item" @click.stop="deleteItem">删除</div>            </template>            <div class="item" v-if="page == 'edit' && item.type == 'vote'" @click.stop="deleteItem">删除</div>        </div>    </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1">    <a class="item icon" v-if="item.recommend == 1 && item.best != 1" target="_blank" href="/recommend">        <img style="height: 25px;" :src="valueUrl + '/img/recommend-icon.png'" />    </a>    <a class="item icon" v-if="item.best == 1" target="_blank" href="/best">        <img style="height: 25px;" v-if="item.best == 1" :src="valueUrl + '/img/essence-icon.png'" />    </a>    <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'/section/' + item.uniqid" target="_blank">{{ item.name }}</a>    <a class="item" v-for="(item, index) in tags" :key="item" :href="'/tag/' + item" target="_blank">{{ item }}</a></div><report v-if="reportState" :itemdata="item"></report>`,
 });

component/item-head/item-head.txt

@@ -63,10 +63,10 @@
 
 <div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1">
     <a class="item icon" v-if="item.recommend == 1 && item.best != 1" target="_blank" href="/recommend">
-        <img style="height: 24px;" :src="valueUrl + '/img/recommend-icon.png'" />
+        <img style="height: 25px;" :src="valueUrl + '/img/recommend-icon.png'" />
     </a>
     <a class="item icon" v-if="item.best == 1" target="_blank" href="/best">
-        <img style="height: 24px;" v-if="item.best == 1" :src="valueUrl + '/img/essence-icon.png'" />
+        <img style="height: 25px;" v-if="item.best == 1" :src="valueUrl + '/img/essence-icon.png'" />
     </a>
     <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'/section/' + item.uniqid" target="_blank">{{ item.name }}</a>
     <a class="item" v-for="(item, index) in tags" :key="item" :href="'/tag/' + item" target="_blank">{{ item }}</a>