#

src/assets/img/add.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7881 0H13.2594V10.7406H24V13.2119H13.2594V24H10.7881V13.2119H0V10.7406H10.7881V0Z" fill="#969BA3"/>
+</svg>

src/assets/img/hg1.svg

@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743572706807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23826" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.2 257.2c0.8 0.3 1.4 0.7 2.2 1l0.4-3.3-2.6 2.3z m-803.1-0.5c0.4-0.2 0.9-0.3 1.3-0.6l-1.7-1.4 0.4 2z m769.7 40.1c-7.1 0-13.5 2.8-18.2 7.3-0.3 0.3-0.4 0.2-0.3-0.2L679.6 462.4 536.5 175.7c-6.7-8.9-17.3-14.5-29.3-14.5-14 0-26.2 7.9-32.4 19.4L334.1 462.4 152.8 298.8c-3.8-2.1-8.2-3.3-12.9-3.3-14.5 0-26.2 11.8-26.2 26.2 0 1.2-0.2 1.8-0.6 1.8l56.1 419.1c0-1.6-0.1-3.2-0.3-4.9 3.4 29.2 23.1 53.4 49.6 63.4-2.4-0.9-4.8-1.6-7-2 56.3 21.1 166.8 34.8 294.1 33.6 127.9-1.1 239.4-16.9 296.5-39.2-2.1 0.4-4.3 1-6.7 1.9 26.5-10.1 46.2-34.3 49.6-63.5-0.4 3.4-0.4 6.6-0.2 9.5l55.7-416.9c-0.2-0.2-0.4-0.8-0.4-1.7 0-14.2-11.7-26-26.3-26z" fill="#FFD700" p-id="23827"></path></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H28V28H10C4.47715 28 0 23.5228 0 18V0Z" fill="#F0B343"/>
+<path d="M8.4 21V19.4444H19.6V21H8.4ZM8.4 18.2778L7.38 12.0361C7.35333 12.0361 7.3232 12.0395 7.2896 12.0462C7.256 12.053 7.22613 12.0561 7.2 12.0556C6.86667 12.0556 6.58347 11.942 6.3504 11.7149C6.11734 11.4878 6.00054 11.2124 6 10.8889C5.99947 10.5653 6.11627 10.29 6.3504 10.0629C6.58453 9.83578 6.86773 9.72222 7.2 9.72222C7.53227 9.72222 7.81573 9.83578 8.0504 10.0629C8.28507 10.29 8.4016 10.5653 8.4 10.8889C8.4 10.9796 8.38987 11.0639 8.3696 11.1417C8.34933 11.2194 8.32613 11.2907 8.3 11.3556L10.8 12.4444L13.3 9.11945C13.1533 9.01574 13.0333 8.87963 12.94 8.71111C12.8467 8.54259 12.8 8.36111 12.8 8.16667C12.8 7.84259 12.9168 7.567 13.1504 7.33989C13.384 7.11278 13.6672 6.99948 14 7C14.3328 7.00052 14.6163 7.11408 14.8504 7.34067C15.0845 7.56726 15.2011 7.84259 15.2 8.16667C15.2 8.36111 15.1533 8.54259 15.06 8.71111C14.9667 8.87963 14.8467 9.01574 14.7 9.11945L17.2 12.4444L19.7 11.3556C19.6733 11.2907 19.6499 11.2194 19.6296 11.1417C19.6093 11.0639 19.5995 10.9796 19.6 10.8889C19.6 10.5648 19.7168 10.2892 19.9504 10.0621C20.184 9.835 20.4672 9.72171 20.8 9.72222C21.1328 9.72274 21.4163 9.8363 21.6504 10.0629C21.8845 10.2895 22.0011 10.5648 22 10.8889C21.9989 11.213 21.8824 11.4886 21.6504 11.7157C21.4184 11.9428 21.1349 12.0561 20.8 12.0556C20.7733 12.0556 20.7435 12.0524 20.7104 12.0462C20.6773 12.04 20.6472 12.0366 20.62 12.0361L19.6 18.2778H8.4Z" fill="black"/>
+</svg>

src/assets/img/hg2.svg

@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743572706807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23826" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.2 257.2c0.8 0.3 1.4 0.7 2.2 1l0.4-3.3-2.6 2.3z m-803.1-0.5c0.4-0.2 0.9-0.3 1.3-0.6l-1.7-1.4 0.4 2z m769.7 40.1c-7.1 0-13.5 2.8-18.2 7.3-0.3 0.3-0.4 0.2-0.3-0.2L679.6 462.4 536.5 175.7c-6.7-8.9-17.3-14.5-29.3-14.5-14 0-26.2 7.9-32.4 19.4L334.1 462.4 152.8 298.8c-3.8-2.1-8.2-3.3-12.9-3.3-14.5 0-26.2 11.8-26.2 26.2 0 1.2-0.2 1.8-0.6 1.8l56.1 419.1c0-1.6-0.1-3.2-0.3-4.9 3.4 29.2 23.1 53.4 49.6 63.4-2.4-0.9-4.8-1.6-7-2 56.3 21.1 166.8 34.8 294.1 33.6 127.9-1.1 239.4-16.9 296.5-39.2-2.1 0.4-4.3 1-6.7 1.9 26.5-10.1 46.2-34.3 49.6-63.5-0.4 3.4-0.4 6.6-0.2 9.5l55.7-416.9c-0.2-0.2-0.4-0.8-0.4-1.7 0-14.2-11.7-26-26.3-26z" fill="#C0C0C0" p-id="23827"></path></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H28V28H10C4.47715 28 0 23.5228 0 18V0Z" fill="black"/>
+<path d="M8.4 21V19.4444H19.6V21H8.4ZM8.4 18.2778L7.38 12.0361C7.35333 12.0361 7.3232 12.0395 7.2896 12.0462C7.256 12.053 7.22613 12.0561 7.2 12.0556C6.86667 12.0556 6.58347 11.942 6.3504 11.7149C6.11734 11.4878 6.00054 11.2124 6 10.8889C5.99947 10.5653 6.11627 10.29 6.3504 10.0629C6.58453 9.83578 6.86773 9.72222 7.2 9.72222C7.53227 9.72222 7.81573 9.83578 8.0504 10.0629C8.28507 10.29 8.4016 10.5653 8.4 10.8889C8.4 10.9796 8.38987 11.0639 8.3696 11.1417C8.34933 11.2194 8.32613 11.2907 8.3 11.3556L10.8 12.4444L13.3 9.11945C13.1533 9.01574 13.0333 8.87963 12.94 8.71111C12.8467 8.54259 12.8 8.36111 12.8 8.16667C12.8 7.84259 12.9168 7.567 13.1504 7.33989C13.384 7.11278 13.6672 6.99948 14 7C14.3328 7.00052 14.6163 7.11408 14.8504 7.34067C15.0845 7.56726 15.2011 7.84259 15.2 8.16667C15.2 8.36111 15.1533 8.54259 15.06 8.71111C14.9667 8.87963 14.8467 9.01574 14.7 9.11945L17.2 12.4444L19.7 11.3556C19.6733 11.2907 19.6499 11.2194 19.6296 11.1417C19.6093 11.0639 19.5995 10.9796 19.6 10.8889C19.6 10.5648 19.7168 10.2892 19.9504 10.0621C20.184 9.835 20.4672 9.72171 20.8 9.72222C21.1328 9.72274 21.4163 9.8363 21.6504 10.0629C21.8845 10.2895 22.0011 10.5648 22 10.8889C21.9989 11.213 21.8824 11.4886 21.6504 11.7157C21.4184 11.9428 21.1349 12.0561 20.8 12.0556C20.7733 12.0556 20.7435 12.0524 20.7104 12.0462C20.6773 12.04 20.6472 12.0366 20.62 12.0361L19.6 18.2778H8.4Z" fill="#CFCFCF"/>
+</svg>

src/assets/img/hg3.svg

@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743572706807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23826" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.2 257.2c0.8 0.3 1.4 0.7 2.2 1l0.4-3.3-2.6 2.3z m-803.1-0.5c0.4-0.2 0.9-0.3 1.3-0.6l-1.7-1.4 0.4 2z m769.7 40.1c-7.1 0-13.5 2.8-18.2 7.3-0.3 0.3-0.4 0.2-0.3-0.2L679.6 462.4 536.5 175.7c-6.7-8.9-17.3-14.5-29.3-14.5-14 0-26.2 7.9-32.4 19.4L334.1 462.4 152.8 298.8c-3.8-2.1-8.2-3.3-12.9-3.3-14.5 0-26.2 11.8-26.2 26.2 0 1.2-0.2 1.8-0.6 1.8l56.1 419.1c0-1.6-0.1-3.2-0.3-4.9 3.4 29.2 23.1 53.4 49.6 63.4-2.4-0.9-4.8-1.6-7-2 56.3 21.1 166.8 34.8 294.1 33.6 127.9-1.1 239.4-16.9 296.5-39.2-2.1 0.4-4.3 1-6.7 1.9 26.5-10.1 46.2-34.3 49.6-63.5-0.4 3.4-0.4 6.6-0.2 9.5l55.7-416.9c-0.2-0.2-0.4-0.8-0.4-1.7 0-14.2-11.7-26-26.3-26z" fill="#CD7F32" p-id="23827"></path></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H28V28H10C4.47715 28 0 23.5228 0 18V0Z" fill="#D9D9D9"/>
+<path d="M8.4 21V19.4444H19.6V21H8.4ZM8.4 18.2778L7.38 12.0361C7.35333 12.0361 7.3232 12.0395 7.2896 12.0462C7.256 12.053 7.22613 12.0561 7.2 12.0556C6.86667 12.0556 6.58347 11.942 6.3504 11.7149C6.11734 11.4878 6.00054 11.2124 6 10.8889C5.99947 10.5653 6.11627 10.29 6.3504 10.0629C6.58453 9.83578 6.86773 9.72222 7.2 9.72222C7.53227 9.72222 7.81573 9.83578 8.0504 10.0629C8.28507 10.29 8.4016 10.5653 8.4 10.8889C8.4 10.9796 8.38987 11.0639 8.3696 11.1417C8.34933 11.2194 8.32613 11.2907 8.3 11.3556L10.8 12.4444L13.3 9.11945C13.1533 9.01574 13.0333 8.87963 12.94 8.71111C12.8467 8.54259 12.8 8.36111 12.8 8.16667C12.8 7.84259 12.9168 7.567 13.1504 7.33989C13.384 7.11278 13.6672 6.99948 14 7C14.3328 7.00052 14.6163 7.11408 14.8504 7.34067C15.0845 7.56726 15.2011 7.84259 15.2 8.16667C15.2 8.36111 15.1533 8.54259 15.06 8.71111C14.9667 8.87963 14.8467 9.01574 14.7 9.11945L17.2 12.4444L19.7 11.3556C19.6733 11.2907 19.6499 11.2194 19.6296 11.1417C19.6093 11.0639 19.5995 10.9796 19.6 10.8889C19.6 10.5648 19.7168 10.2892 19.9504 10.0621C20.184 9.835 20.4672 9.72171 20.8 9.72222C21.1328 9.72274 21.4163 9.8363 21.6504 10.0629C21.8845 10.2895 22.0011 10.5648 22 10.8889C21.9989 11.213 21.8824 11.4886 21.6504 11.7157C21.4184 11.9428 21.1349 12.0561 20.8 12.0556C20.7733 12.0556 20.7435 12.0524 20.7104 12.0462C20.6773 12.04 20.6472 12.0366 20.62 12.0361L19.6 18.2778H8.4Z" fill="#AE938C"/>
+</svg>

src/assets/img/sy.svg

@@ -1 +1,3 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744013519945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4321" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M939.175079 484.343103 557.721321 107.755166c-1.927909-2.289136-5.950526-6.025227-11.568477-9.730619-10.06217-6.627954-20.757766-10.001795-31.783891-10.001795-11.855002 0-22.820752 3.40454-32.597419 10.092869-6.477528 4.458545-9.942443 8.465812-11.4334 10.454096L89.606831 484.373803c-6.522554 6.417153-10.107195 14.973016-10.107195 24.071232 0 9.06854 3.584642 17.624403 10.107195 24.041556 11.990079 11.900028 29.494755 8.495488 46.169529-7.92346l25.592888-25.306362 41.892109-40.08495 0 389.497968c0 48.143487 39.617299 87.308485 88.317465 87.308485l148.993382 0L440.572204 687.670975c0-19.160385 15.84692-34.736129 35.30918-34.736129l77.020164 0c19.47761 0 35.293831 15.575744 35.293831 34.736129l0 248.307296 149.008732 0c48.685839 0 88.332814-39.164998 88.332814-87.308485L825.536926 461.189777l67.484997 66.355267c11.508102 7.531534 21.842471 11.538801 30.217209 11.538801 6.236028 0 11.44875-2.169409 15.936971-6.598278 6.507204-6.417153 10.092869-14.94334 10.122545-24.041556C949.297624 499.346819 945.712983 490.789932 939.175079 484.343103z" fill="#64748B" p-id="4322" data-spm-anchor-id="a313x.search_index.0.i0.3ddb3a81SQqGzv" class="selected"></path></svg>
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33315 24C2.44914 24 1.60134 23.6514 0.976257 23.0308C0.35117 22.4102 0 21.5684 0 20.6908V9.66002C0 9.62178 0.00185188 9.58502 0.00555537 9.54972H0C0 8.91324 0.25443 8.30324 0.706627 7.85539L7.64402 0.968896C8.26908 0.348512 9.11672 0 10.0006 0C10.8844 0 11.732 0.348512 12.3571 0.968896L19.2934 7.85539C19.7456 8.30435 20 8.91434 20 9.54861H19.9944C19.9981 9.58538 20 9.62215 20 9.65892V20.6897C20 21.5673 19.6488 22.409 19.0237 23.0296C18.3987 23.6502 17.5509 23.9989 16.6669 23.9989L3.33315 24ZM10.785 2.52864L17.7768 9.4703V20.6919C17.7768 20.9844 17.6597 21.265 17.4514 21.4719C17.243 21.6787 16.9604 21.795 16.6657 21.795H13.3326V16.2796C13.3326 15.4019 12.9814 14.5602 12.3563 13.9396C11.7313 13.319 10.8835 12.9704 9.99944 12.9704C9.11544 12.9704 8.26764 13.319 7.64255 13.9396C7.01747 14.5602 6.6663 15.4019 6.6663 16.2796V21.795H3.33315C3.03848 21.795 2.75588 21.6787 2.54752 21.4719C2.33916 21.265 2.2221 20.9844 2.2221 20.6919V9.4703L9.21393 2.52864C9.42229 2.32185 9.70483 2.20568 9.99944 2.20568C10.2941 2.20568 10.5766 2.32185 10.785 2.52864Z" fill="#969BA3"/>
+</svg>

src/assets/img/sy1.svg

@@ -1 +1,3 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744013519945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4321" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M939.175079 484.343103 557.721321 107.755166c-1.927909-2.289136-5.950526-6.025227-11.568477-9.730619-10.06217-6.627954-20.757766-10.001795-31.783891-10.001795-11.855002 0-22.820752 3.40454-32.597419 10.092869-6.477528 4.458545-9.942443 8.465812-11.4334 10.454096L89.606831 484.373803c-6.522554 6.417153-10.107195 14.973016-10.107195 24.071232 0 9.06854 3.584642 17.624403 10.107195 24.041556 11.990079 11.900028 29.494755 8.495488 46.169529-7.92346l25.592888-25.306362 41.892109-40.08495 0 389.497968c0 48.143487 39.617299 87.308485 88.317465 87.308485l148.993382 0L440.572204 687.670975c0-19.160385 15.84692-34.736129 35.30918-34.736129l77.020164 0c19.47761 0 35.293831 15.575744 35.293831 34.736129l0 248.307296 149.008732 0c48.685839 0 88.332814-39.164998 88.332814-87.308485L825.536926 461.189777l67.484997 66.355267c11.508102 7.531534 21.842471 11.538801 30.217209 11.538801 6.236028 0 11.44875-2.169409 15.936971-6.598278 6.507204-6.417153 10.092869-14.94334 10.122545-24.041556C949.297624 499.346819 945.712983 490.789932 939.175079 484.343103z" fill="#0354D7" p-id="4322" data-spm-anchor-id="a313x.search_index.0.i0.3ddb3a81SQqGzv" class="selected"></path></svg>
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33315 24C2.44914 24 1.60134 23.6514 0.976257 23.0308C0.35117 22.4102 0 21.5684 0 20.6908V9.66002C0 9.62178 0.00185188 9.58502 0.00555537 9.54972H0C0 8.91324 0.25443 8.30324 0.706627 7.85539L7.64402 0.968896C8.26908 0.348512 9.11672 0 10.0006 0C10.8844 0 11.732 0.348512 12.3571 0.968896L19.2934 7.85539C19.7456 8.30435 20 8.91434 20 9.54861H19.9944C19.9981 9.58538 20 9.62215 20 9.65892V20.6897C20 21.5673 19.6488 22.409 19.0237 23.0296C18.3987 23.6502 17.5509 23.9989 16.6669 23.9989L3.33315 24ZM10.785 2.52864L17.7768 9.4703V20.6919C17.7768 20.9844 17.6597 21.265 17.4514 21.4719C17.243 21.6787 16.9604 21.795 16.6657 21.795H13.3326V16.2796C13.3326 15.4019 12.9814 14.5602 12.3563 13.9396C11.7313 13.319 10.8835 12.9704 9.99944 12.9704C9.11544 12.9704 8.26764 13.319 7.64255 13.9396C7.01747 14.5602 6.6663 15.4019 6.6663 16.2796V21.795H3.33315C3.03848 21.795 2.75588 21.6787 2.54752 21.4719C2.33916 21.265 2.2221 20.9844 2.2221 20.6919V9.4703L9.21393 2.52864C9.42229 2.32185 9.70483 2.20568 9.99944 2.20568C10.2941 2.20568 10.5766 2.32185 10.785 2.52864Z" fill="#0663FE"/>
+</svg>

src/common/apiConfig.js

@@ -72,6 +72,10 @@ export const API_CONFIG = {
     ajax_addedUsuallyApp: {
       functionName: "select_addedUsuallyApp",
     },
+     // 查询后台预设常用ai工具
+     ajax_AdminApp: {
+      functionName: "select_AdminApp",
+    },
 
     // 查询已添加常用应用
     ajax_usuallyApp: {

src/components/botPage.vue

@@ -4,37 +4,63 @@
             热门应用
         </div>
 
-        <div class="conBlock" v-for="(k,ind) in hotApp" :key="ind+'p'">
-            <div style="display: flex;justify-content: space-between;margin-bottom: 16px;">
-                <div style="color: #1f2937;font-weight: 600;font-size: 18px;margin-bottom: 16px;">{{ tab[ind].name }}</div>
-                <div @click="lookMore(ind)" style="color: #0354d7;font-size: 14px;cursor: pointer;">查看全部</div>
-            </div>
-            <div style="display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 16px;">
-                <div v-for="(item,index) in k" class="tabCon" @click="openNewWindow(item)"  :key="index" style="min-width: 308px;">
-                        <div class="AppList">
-                            <img class="appImg" :src="JSON.parse(item.json).icon" alt="">
+
+        <div class="hotAppBlo" >
+            <div class="BigBlo" v-for="(k,ind) in hotApp" :key="ind+'p'" >
+                <div :class="['conBlock',ind % 2 == 0 ? 'conBlock1':'conBlock2']">
+                    <div class="conBlockOne" @click="openNewWindow(k[0])" :class="[ind % 2 == 0 ? 'conW1':'conW2']">
+                        <div class="conBlockTwo" :style="{bottom : ind % 2 == 0 ? '':'16px'}">
+                            <img class="appImg" :src="JSON.parse(k[0].json).icon" alt="">
                             <div class="con">
-                                <div class="tit">{{ item.name }}</div>
+                                <div class="tit">{{ k[0].name }}</div>
                                 <div class="bri">
-                                    <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
+                                    <el-tooltip class="item" effect="light" :content="k[0].detail" placement="bottom">
                                         <span>
-                                            {{ item.detail }}
+                                            {{ k[0].detail }}
                                         </span>
                                     </el-tooltip>
                                 </div>
                             </div>
-                            <div class="hg">
-                                <img style="width: 20px;" v-if="index == 0" src="../assets/img/hg1.svg" alt="">
-                                <img style="width: 20px;" v-if="index == 1" src="../assets/img/hg2.svg" alt="">
-                                <img style="width: 20px;" v-if="index == 2" src="../assets/img/hg3.svg" alt="">
-                            </div>
+                        </div>
+                       
+                        <img class="hg" style="width: 20px;" src="../assets/img/hg1.svg" alt="">
+                    </div>
+
+                    <div style="display: flex;" :class="[ind % 2 == 0 ? 'conBlock2':'conBlock1']">
+                        <div v-for="(item,index) in list(k)" class="tabCon" @click="openNewWindow(item)"  :key="index">
+                                <div style="display: flex;flex-direction: column; gap: 12px;">
+                                    <img class="appImg" :src="JSON.parse(item.json).icon" alt="">
+                                    <div class="con">
+                                        <div class="tit">{{ item.name }}</div>
+                                        <div class="bri">
+                                            <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
+                                                <span>
+                                                    {{ item.detail }}
+                                                </span>
+                                            </el-tooltip>
+                                        </div>
+                                    </div>
+                                    <img class="hg" style="width: 20px;" v-if="index == 0" src="../assets/img/hg2.svg" alt="">
+                                    <img class="hg" style="width: 20px;" v-if="index == 1" src="../assets/img/hg3.svg" alt="">
+                                </div>
+                        </div>
                     </div>
                 </div>
+                <div style="display: flex;justify-content: space-between;">
+                    <div class="AppTit">{{ tab[ind].name }}</div>
+                    <div class="AppBri" @click="lookMore(ind)">查看全部</div>
+                </div>
             </div>
+           
         </div>
+
+
+
+
+
+
         <el-dialog
         :title="diaTit"
-        
         :visible.sync="dialogVisible"
         class="moreDia"
         :close-on-click-modal="false"
@@ -42,8 +68,10 @@
         width="60%"
         :before-close="handleClose">
             <div v-loading="loading" style="display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 16px;">
-                <div v-for="(item,index) in moreList" class="tabCon" @click="openNewWindow(item)"  :key="index" style="min-width: 308px;">
-                        <div class="AppList">
+                <div v-for="(item,index) in moreList" 
+                class="tabCon" @click="openNewWindow(item)"  
+                :key="index" style="min-width: 308px;border: 1px #e7e7e7 solid;">
+                        <div>
                             <img class="appImg" :src="JSON.parse(item.json).icon" alt="">
                             <div class="con">
                                 <div class="tit">{{ item.name }}</div>
@@ -55,12 +83,11 @@
                                     </el-tooltip>
                                 </div>
                             </div>
-                            <div class="hg">
-                                <img style="width: 20px;" v-if="index == 0" src="../assets/img/hg1.svg" alt="">
-                                <img style="width: 20px;" v-if="index == 1" src="../assets/img/hg2.svg" alt="">
-                                <img style="width: 20px;" v-if="index == 2" src="../assets/img/hg3.svg" alt="">
-                            </div>
+                            
                     </div>
+                    <img class="hg" style="width: 20px;" v-if="index == 0" src="../assets/img/hg1.svg" alt="">
+                    <img class="hg" style="width: 20px;" v-if="index == 1" src="../assets/img/hg2.svg" alt="">
+                    <img class="hg" style="width: 20px;" v-if="index == 2" src="../assets/img/hg3.svg" alt="">
                 </div>
             </div>
         </el-dialog>
@@ -77,6 +104,13 @@ import { mapGetters } from 'vuex';
         props:['hotApp'],
         computed: {
             ...mapGetters(['userinfo']),
+            list(){
+                return function(val) {
+                    console.log(val);
+                    let newArr = val.slice(1)
+                    return newArr
+                }
+            }
         },
         data() {
             return {
@@ -138,6 +172,81 @@ import { mapGetters } from 'vuex';
 </script>
 
 <style scoped>
+.hotAppBlo{
+    /* display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5%; 网格间距 */
+    display: flex;
+    justify-content: space-between;
+}
+.BigBlo{
+    background-color: #EFEFEF;
+    border-radius: 10px;
+    padding: 20px;
+    border: 1px solid #BDBDBD;
+    box-shadow: 0px 0px 40px 0px #0000000D;
+}
+.conBlock{
+    display: flex;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    height: calc(100% - 20px);
+    gap: 10px;
+}
+.conBlock1{
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-around;
+    gap: 10px;
+}
+
+.AppBri{
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    text-align: right;
+    color: #969BA3;
+    cursor: pointer;
+}
+.AppTit{
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+}
+
+.conBlockOne{
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 16px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    justify-content: flex-start;
+    position: relative;
+    cursor: pointer;
+    transition: all 0.3s ease; /* 统一过渡效果 */
+}
+.conBlockOne:hover{
+    transform: translateY(-5px); /* 向上位移 */
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.conBlockTwo{
+    width: 91px;
+    height: 90px;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    gap: 12px;
+}
+
+.conBlock2{
+    justify-content: space-between;
+    gap: 10px;
+}
 .moreDia >>> .el-dialog{
     border-radius: 10px;
 }
@@ -146,60 +255,98 @@ import { mapGetters } from 'vuex';
     overflow: auto;
     border-top: 1px #e7e7e7 solid;
 }
-.conBlock{
-    background-color: #fff;
-    padding: 24px;
-    box-sizing: border-box;
-    margin-bottom: 24px;
+.AppList{
+    position: relative;
+    flex-wrap: wrap;display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+    background: #fff;
+    border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
     border-radius: 10px;
+    padding: 16px;box-sizing: border-box;
+}
+.conW1{
+    /* height: 100%; */
+    width: 100%;
+    height: 50%;
+    min-width: 100px;
+    min-height: 100px;
+    justify-content: flex-start;
 }
+.conW2{
+    height: 100%;
+    width: 7vw;
+    min-width: 100px;
+    justify-content: flex-end !important;
+}
+
 .tabCon{
     transition: all 0.3s ease; /* 统一过渡效果 */
     border-radius: 10px;
     cursor: pointer;
+    display: flex;
+    width: 7vw;
+    height: 7vw;
+    min-width: 100px;
+    min-height: 100px;
+    background: #fff;
+    padding: 26px 14px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
 }
+
 .tabCon:hover{
     transform: translateY(-5px); /* 向上位移 */
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
-.hg img{
-    width: 23px !important;
-    height: 20px;
+.hg {
+    width: 28px !important;
+    height: 28px;
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 .con{
     flex: 1;
-    margin-left: 12px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    gap: 6px;
+    height: 54px;
+    justify-content: flex-end;
+}
+.appImg{
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
 }
 .tit{
-    color: #1f2937;font-size: 16px;height: 24px;line-height: 24px;
+    color: #000000;
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-family: PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 100%;
 }
 .bri{
-    color: #6b7280;font-size: 12px;height: 16px;line-height: 16px;
-    overflow: hidden;
+    color: #969BA3;
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-family: PingFang SC;
+    font-weight: 300;
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: 0%;
+
 }
-.appImg{
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-.AppList{
-    flex-wrap: wrap;display: flex;
-    justify-content: space-between;
-    border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
-    border-radius: 10px;padding: 16px;box-sizing: border-box;
-}
+
+
 </style>

src/components/sidebarL.vue

@@ -1,125 +1,114 @@
 <template>
-        <div style="position: relative;height: 100%;">
-            <div class="left">
+        <div class="left">
+            <!-- <div > -->
                 <div class="logo2">
                     <img :src="fromL.basics.logo ? fromL.basics.logo : require('../assets/img/moren.png')" alt="">
                 </div>
-                <div class="ulT">
+                <!-- <div class="ulT"> -->
 
-                    <!-- 默认首页 -->
-                    <div class="ulTOne" @click.stop="goto(0)" :style="{background :activeL === 0 ?'#E6F0FF':'',zIndex:9 }">
-                        <div  class="menu_left">
+                <!-- 默认首页 -->
+                <div class="ulTOne" @click.stop="goto(0)">
+                    <div class="menu_left">
+                        <div class="iconW">
                             <img  class="logo" :src="activeL === 0 ? require('../assets/img/sy1.svg') : require('../assets/img/sy.svg')" alt="">
-                            <span  :style="{color : activeL === 0 ? '#0051D7' :''}">首页</span>
                         </div>
+                        <span class="barT" :style="{color : activeL === 0 ? '#0051D7' :''}">首页</span>
                     </div>
+                </div>
 
-                    <!-- 权限 -->
-                    <div class="TwoBar ulTOne" v-for="(item,index) in appSignL(fromL.admin.sidebar.list)"
-                        :key="index+1">
-
-                        <!-- 渲染菜单类型 -->
-                        <div  class="menu_left" v-if="item.menuName">
-                            <!-- :src="activeL === (index +1) ? item.menuActiveIcon : item.menuIcon" -->
-                            <img :src="item.menuIcon" class="logo" alt="">
-                            <span >{{ item.menuName }}</span>
-                            <!-- :style="{color : activeL === (index +1) ? '#0051D7' :''}" -->
-                              <!-- 二级导航 -->
-                                <transition name="slide">
-                                    <div class="ulTCopy">
-                                        <div class="ulTCopyTit">
-                                            <span>{{ item.menuName }}</span>
-                                            <!-- <span @click="closeCopy" class="cha" style="color: #6B7280;font-size: 23px;cursor: pointer;">⨯</span> -->
-                                        </div>
-                                        <div class="ulTCopyHei">
-                                            <div class="ulTCopyTxt" :style="{background : (activeLTwo === index+1 +'+' + ind)? '#E6F0FF' : ''}" 
-                                            v-for="(i,ind) in appSignL(item.children)"
-                                             @click="levTwo(i,ind,index)" :key="ind+'a'">
-                                            <!-- {{ activeLTwo }}------{{  index+1 +'+' + ind }} -->
-                                                <div>
-                                                    <div style="display: flex;justify-content: space-between;align-items: center;" v-for="(p,pin) in AppCon(i.url)" :key="pin+'p'">
-                                                        <img style="width: 30px;object-fit: contain;height: 30px;margin-right: 5px;"  
-                                                        :src="p.icon" 
-                                                        alt="">
-                                                        <div class="ovlH">{{ p.name }}</div>
-                                                    </div>
+                <!-- 权限 -->
+                <div  v-for="(item,index) in appSignL(fromL.admin.sidebar.list)"
+                    :key="index+1">
+
+                    <!-- 渲染菜单类型 -->
+                     <div class="ulTOne" v-if="item.menuName">
+                        <el-popover
+                            placement="right"
+                            :append-to-body="false"
+                            trigger="hover"
+                            >
+                                <div class="ulTCopy" >
+                                    <div class="ulTCopyTit">
+                                        {{ item.menuName }}
+                                    </div>
+                                    <div class="ulTCopyHei">
+                                        <div class="ulTCopyTxt"  
+                                        v-for="(i,ind) in appSignL(item.children)"
+                                            @click="levTwo(i,ind,index)" :key="ind+'a'">
+                                                <div class="ulTCopyConT" 
+                                                :style="{background : (activeLTwo === index+1 +'+' + ind)? '#0663FE' : '',color:(activeLTwo === index+1 +'+' + ind)? '#fff' : '#000000E5'}"
+                                                v-for="(p,pin) in AppCon(i.url)" :key="pin+'p'">
+                                                        {{ p.name }}
                                                 </div>
-                                            </div>
                                         </div>
                                     </div>
+                                </div>
+                            <div slot="reference" class="menu_left">
+                                <div class="iconW">
+                                    <img :src="activeL === (index +1) ? item.menuActiveIcon : item.menuIcon" class="logo" alt="">
+                                </div>
+                                <span class="barT">{{ item.menuName }}</span>
+                            </div>
+                        </el-popover>
 
-                                </transition>
-                        </div>
-                    
-                        <!-- 渲染平台工具类型 -->
-                        <div @click.stop="goto(index,item)" style="border-radius: 10px;" 
-                        :style="{background :activeL === (index +1) ?'#E6F0FF':'',zIndex : 9999 }" v-else>
-                            <div  v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
-                                <div class="menu_left" >
-                                    <div>
-                                        <img class="logo3"  
-                                        :src="activeL === (index +1) ? p.icon : p.activeIcon" 
+                        
+                     </div>
+                   
+                
+                    <!-- 渲染平台工具类型 -->
+                    <div @click.stop="goto(index,item)" 
+                     v-else>
+                        <div class="ulTOne" @mouseenter="mouGet(item.toolId)" v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
+                            <el-popover
+                                placement="right"
+                                :append-to-body="false"
+                                :disabled="item.toolId != 'appStore'"
+                                trigger="hover"
+                            >
+                                <div class="ulTCopy" style="z-index: -10;">
+                                    <div class="ulTCopyTit">
+                                        <span>CocoFlow</span>
+                                    </div>
+                                    <div class="ulTCopyHei" >
+                                        <span style="color: #00000066;">最近使用</span>
+                                        <div class="ulTCopyTxt"  
+                                        v-for="(i,ind) in cocoFlowList[0]" @click="openNewWindow(i.url)" :key="ind+'ab'">
+                                        <div class="ulTCopyConT">{{ i.name }}</div>
+                                        </div>
+                                        <span style="color: #00000066;">我的收藏</span>
+                                        <div class="ulTCopyTxt"
+                                        v-for="(i,ind) in cocoFlowList[1]" @click="openNewWindow(i.url)" :key="ind+'a'">
+                                                    
+                                            <div class="ulTCopyConT">{{ i.name }}</div>
+                                        </div>
+                                    </div>
+
+                                </div>
+
+                                <div slot="reference" class="menu_left" >
+                                    <div class="iconW">
+                                        <img class="logo"  
+                                        :src="activeL === (index +1) ? p.activeIcon : p.defaultIcon" 
                                         alt="">
                                     </div>
-                                    <span :style="{color : activeL === (index +1) ? '#0051D7' :''}">
+                                    <span class="barT" :style="{color : activeL === (index +1) ? '#0051D7' :''}">
                                         {{ p.name }}
                                     </span>
                                 </div>
-                            </div>
+                            </el-popover>
 
-                            <transition name="slide" style="z-index: -10;">
-                                    <!-- 应用中心 -->
-                                    <div class="ulTCopy" style="z-index: -10;"  v-if="item.toolId == 'appStore'">
-                                        <div class="ulTCopyTit">
-                                            <span>CocoFlow</span>
-                                            <!-- <span @click="closeCopy" class="cha" style="color: #6B7280;font-size: 23px;cursor: pointer;">⨯</span> -->
-                                        </div>
-                                        <div class="ulTCopyHei" >
-                                            <span style="color: #00000066;">最近使用</span>
-                                            <div class="ulTCopyTxt"  
-                                            v-for="(i,ind) in cocoFlowList[0]" @click="openNewWindow(i.url)" :key="ind+'ab'">
-                                                <div  class="ulTCopyTxtCon">
-                                                        <img style="width: 20px;height: 20px;border-radius: 10px;object-fit: contain;margin-right: 5px;"  
-                                                        :src="JSON.parse(i.json).icon" 
-                                                        alt="">
-                                                        <div class="ovlH">{{ i.name }}</div>
-                                                </div>
-                                            </div>
-                                            <span style="color: #00000066;">我的收藏</span>
-
-                                            <div class="ulTCopyTxt"
-                                            v-for="(i,ind) in cocoFlowList[1]" @click="openNewWindow(i.url)" :key="ind+'a'">
-                                                    <div class="ulTCopyTxtCon" >
-                                                        <img style="width: 20px;height: 20px;border-radius: 10px;object-fit: contain;margin-right: 5px;"  
-                                                        :src="JSON.parse(i.json).icon" 
-                                                        alt="">
-                                                        <div class="ovlH">{{ i.name }}</div>
-                                                </div>
-                                            </div>
-                                        </div>
 
-                                    </div>
 
-                                </transition>
                         </div>
                     </div>
-                
                 </div>
-                <div class="userInfo">
-                    <img style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%;margin-bottom: 4px;" :src="userinfo.headportrait ? userinfo.headportrait : require('../assets/img/toux.png')" alt="">
-                    <div style="margin-bottom: 8px;">{{ userinfo.username }}</div>
-                    <span style="cursor: pointer;padding: 5px;background-color: #e7e7e7;box-sizing: border-box;border-radius: 5px;" @click="handleLogout">退出登录</span>
-                </div>
-            </div>
-           
-           
           
         </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { loginOut } from '@/api/user';
+
 import store from '../store'
 import { API_CONFIG } from "@/common/apiConfig";
 
@@ -174,6 +163,7 @@ import { API_CONFIG } from "@/common/apiConfig";
             return {
                 // 一级选中第几个
                 activeL:0,
+                visible:true,
                 // 二级选中第几个
                 activeLTwo: null,
                 cocoFlowList:[],
@@ -184,29 +174,12 @@ import { API_CONFIG } from "@/common/apiConfig";
             ...mapActions({
                 logout: 'user/logout'
             }),
-            async handleLogout() {
-                this.$confirm('确定退出吗', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(async () => {
-                    loginOut()
-                    .then(async () => {
-                        this.$message({
-                        message: '退出成功',
-                        type: 'success'
-                        });
-                        await this.logout();
-                        this.$router.push('/login');
-                    })
-                    .catch(err => {
-                        console.error(err);
-                    });
-                }).catch(() => {
-                    // 取消操作
-                });
-            },
 
+            mouGet(val){
+                if(val != 'appStore') return
+                console.log('666')
+                this.getData()
+            },
             // 点击一级导航
             async goto(index,val = null){
                 // console.log('goto',val);
@@ -281,8 +254,11 @@ import { API_CONFIG } from "@/common/apiConfig";
 
                     let pl = {json:kpl ,stateL :true,toolId :val.toolId}
 
+                    // 添加打开应用
                     this.$emit('AddAppJson',pl)
             },
+            
+            // 获取cocoFlow收藏与历史使用记录
             getData(){
                 let params = [
                     {
@@ -299,7 +275,6 @@ import { API_CONFIG } from "@/common/apiConfig";
                     })
                     .catch((err) => {
                         console.log(err);
-                        this.loading = false
                         this.$message.error("获取常见应用失败");
                     });
             },
@@ -307,6 +282,7 @@ import { API_CONFIG } from "@/common/apiConfig";
             async levTwo(val,index,aInd){     
                 
                 this.activeL = ''
+                this.activeL = aInd +1
                 this.activeLTwo = `${aInd + 1}+${index}`
 
                 // 点击相同应用不刷新
@@ -375,26 +351,40 @@ import { API_CONFIG } from "@/common/apiConfig";
 </script>
 
 <style scoped>
+.ulTCopy{
+    overflow: auto;
+    height: 100%;
+
+}
 
 .logo{
-  width: 80px;
-  height: 68px;
+  margin: auto;
+  width: 21px;
+  max-height: 24px;
 }
-.logo3{
-    height: 25px;object-fit: contain;transform: scale(1.5);
+
+.iconW{
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    padding: 1px;
+    box-sizing: border-box;
 }
-.logo2{
-  padding: 16px;
+.logo2 {
+  padding: 8px;
   box-sizing: border-box;
-  height: 68px;
+  height: 48px;
   width: 100%;
   background-color: #fff;
   text-align: center;
-  border-bottom: .5px #e5e7eb solid;
 }
 .logo2 img{
-  width: 37px;
+    width: 30px;
+    height: 30px;
 }
+
 .userInfo{
   width: 80px;
   color: #374151;
@@ -411,61 +401,51 @@ import { API_CONFIG } from "@/common/apiConfig";
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
     width: 80px;
     height: 100%;
+    padding:23px 6px;
+    box-sizing: border-box;
     background-color: #ffffff;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    position: relative;
-    box-shadow: 5px 0 8px rgba(0, 0, 0, 0.1);
-    /* z-index: 999; */
-
-}
-.left .ulT { 
-  width: 100%;
-  height: 100%;
-  padding: 8px 0;
-  box-sizing: border-box;
-  display: flex;
-  gap: 10px;
-  overflow: auto;
-  overflow-x: hidden;
-  flex-direction: column;
-  background-color: #ffffff;
+    gap: 24px;
+    border-right: 1px #D5D5D5 solid;
 }
-.left .ulT .ulTOne{ 
+
+.ulTOne{ 
+    width: 100%;
     border-radius: 10px;
-    margin: 0 auto;
+    display: flex;
+    height: 48px;
+    width: 48px;
+    flex-wrap:nowrap;
+    align-content: center;
+    justify-content: center;
+    position: relative;
 }
 
-.ulT div:nth-child(1){
-    margin-top: 0;
-}
-.ulTCopy{
-    position: fixed;
-    left: -256px;
-    top: 0;
-    height: 100%;
-    width: 256px;
-    z-index: -100;
-    background-color: #ffffff;
-    overflow: visible; 
-    transform: translateX(0px); /* 初始位置在视图之外 */
-    box-shadow: inset 2px 0 8px rgba(0, 0, 0, 0.1),5px 3px 5px 0px rgba(0, 0, 0, 0.1);
-    transition: transform .5s ease;
 
+.barT{
+    font-size:10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.TwoBar:hover .ulTCopy{
-    transform: translateX(336px); /* 初始位置在视图之外 */
-    z-index: -100;
-    display: block !important;
-}
-.TwoBar{
-    position: relative;
-    padding:0 8px;box-sizing: border-box;
+.menu_left {
+  width: 32px;
+  height: 42px;
+  font-size: 10px;
+  color: #64748b;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
 }
 
+
 .slide-enter-active, .slide-leave-active {
   transition: transform 0.5s ease;
   z-index: -1000 !important;
@@ -482,66 +462,84 @@ import { API_CONFIG } from "@/common/apiConfig";
 
   transform: translateX(0); /* 进入时移动到正常位置 */
 }
+.ulTOne >>> .el-popover{
+    overflow: auto;
+    padding: 0 !important;
+    left: 70px !important;
+    height: 596px;
+    width: 154px;
+    z-index: -100;
+    background-color: #FFFFFFE5 !important;
+    overflow: visible; 
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: auto;
+    box-shadow: 0px 8px 10px -5px #00000014;
+    box-shadow: 0px 16px 24px 2px #0000000A;
+    box-shadow: 0px 6px 30px 5px #0000000D;
+    backdrop-filter: blur(16.700000762939453px);
+}
 
 .ulTCopyTit{
-    height: 72px;padding: 16px;box-sizing: border-box;color: #000;font-size: 18px;font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    font-family: PingFang SC;
+    font-weight: 600;
+    font-size: 12px;
+    letter-spacing: 0px;
+    color: #000;
+    height: 40px;
+    padding: 12px 16px;
+    box-sizing: border-box;
     border-bottom: .5px #e5e7eb solid;
+    background: #fff;
 }
 .ulTCopyHei{
-    padding: 16px;box-sizing: border-box;display: flex;flex-direction: column;gap: 10px;
+    display: flex;flex-direction: column;
+    gap: 10px;
     overflow: auto;
+    overflow-x: hidden;
     height: calc(100% - 72px);
 }
 .ulTCopyTxt{
-    height: 48px;padding: 12px;box-sizing: border-box;display: flex;align-items: center;
+    height: 48px;
+    padding: 7px 10px;
+    box-sizing: border-box;display: flex;
+    align-items: center;
     color: #374151;
     border-radius: 10px;
-    cursor: pointer;
     font-size: 16px;
     margin: 0;
 }
+.ulTCopyConT {
+    height: 30px;
+    width: 154px;
+    font-size: 12px;
+    cursor: pointer;
+    border-radius: 8px;
+    padding: 8px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis; */
+}
+.ulTCopyConT:hover{
+    background: #e7e7e7;
+}
 .ulTCopyTxtCon{
    display: flex;align-items: center;width: 100%;
 }
-.ulTCopyTxt:hover{
+/* .ulTCopyTxt:hover{
     background-color: #f3f4f6 !important;
-}
+} */
 .cha:hover{
     color: #000 !important;
 }
 
-.menu_left {
-  width: 64px;
-  height: 70px;
-  font-size: 10px;
-  margin-top: 3px;
-  white-space: nowrap;
-  color: #64748b;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 12px;
-  box-sizing: border-box;
-  border-radius: 10px;
-  border: none;
-  z-index: 1000000;
-  text-decoration: none; /* 移除下划线 */
-  cursor: pointer;
-  border-radius: 10px;
-  margin-top: 12px;
-}
 
-.menu_left:hover{
-    background-color: #f3f4f6 !important;
-}
-.menu_left img{
-  width: 22px;
-  height: 20px;
-}
 .ovlH{
     overflow: hidden;
     white-space: nowrap;

src/components/topPage.vue

@@ -14,18 +14,23 @@
             </div>
             <img style="width: 96px;height: 96px;" src="../assets/img/root.png" alt="">
         </div>
+
+        <!-- 平台应用  -->
         <div class="TabList">
-            <div class="TabListCon" @click="openApp(item)" v-for="(item,index) in appSignL(fromL.admin.index.list)" :key="index">
+            <div
+                 @mouseenter="setHovered(index, true)"
+                @mouseleave="setHovered(index, false)"
+                style="position: relative;"
+                @click="openApp(item)" 
+                v-for="(item,index) in appSignL(fromL.admin.index.list)" 
+                :key="index+'1p'">
+                <div class="TabListCon">
                     <div v-for="(p,pin) in AppCon(item.url)" :key="pin+'p'">
-                        <img style="height: 25px;object-fit: contain;transform: scale(1.5);margin-bottom: 12px;"     
-                        :src="p.icon" 
-                        alt="">
+                        <img class="imgApp" :src="hovList[index] ? p.hoverIcon : p.platformIcon" alt="">
                         <div class="TabListName">
                             {{ p.name }}
                         </div>
                     </div>
-
-                   
                     <div class="TabListBri">
                         <el-tooltip class="item" effect="light" :content="item.description" placement="bottom">
                             <span>
@@ -33,18 +38,48 @@
                             </span>
                         </el-tooltip>
                     </div>
+                </div>
+                    
             </div>
         </div>
+
+        <!-- 常见应用  -->
         <div class="footCon">
             <div class="footConLeft">
-                <div><img style="margin-bottom: 12px;height: 41px;width: 36px;" src="../assets/img/sucai2.svg" alt=""></div>
-                <div style="font-size: 20px;font-weight: 600;color: #1f2937;margin-bottom: 8px;">CocoFlow</div>
-                <div style="color: #4b5563;font-size: 14px;">汇聚丰富的教育AI应用，搭建属于您的专属教育应用</div>
+                <img src="../assets/img/dong.png" alt="">
             </div>
 
             <div class="footList">
-                <div class="footListCon" v-for="(item,index) in CocoFlowList" @click="openNewWindow(item)" :key="index">
-                    <div><img style="margin-bottom: 12px;height: 24px;width: 22px;" :src="JSON.parse(item.json).icon" alt=""></div>
+                <div class="footListCon" v-for="(item,index) in admincocoFlow" @click="openNewWindow(item)" :key="index+'2p'">
+                    <div class="footListConimg"><img style="margin-bottom: 12px;height: 24px;width: 22px;" :src="JSON.parse(item.json).icon" alt=""></div>
+                    <div class="TabListName">{{ item.name }}</div>
+                    <div class="TabListBri">
+                        <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
+                            <span>
+                                {{ item.detail }}
+                            </span>
+                        </el-tooltip>
+                    </div>
+                    <!-- <div class="cha" @click.stop="delApp(item.lid)">
+                        <img style="width: 20px;" src="../assets/img/cha.svg" alt="">
+                    </div> -->
+                </div>
+            </div>
+
+            <div class="footList2">
+                <div class="footList2Tit">
+                    常见应用
+                </div>
+                <div v-for="(i,index) in (4 - CocoFlowList.length)" @click="openUsuallyApp" 
+                :key="index+'3p'" class="footListCon2">
+                    <div style="margin-bottom: 8px;font-size: 40px;color: #0354D7;">
+                        <img src="../assets//img/add.svg" alt="">
+                    </div>
+                </div> 
+                <div class="footListCon" v-for="(item,index) in CocoFlowList" @click="openNewWindow(item)" :key="index+'4p'">
+                    <div class="footListConimg">
+                        <img style="margin-bottom: 12px;height: 24px;width: 22px;" :src="JSON.parse(item.json).icon" alt="">
+                    </div>
                     <div class="TabListName">{{ item.name }}</div>
                     <div class="TabListBri">
                         <el-tooltip class="item" effect="light" :content="item.detail" placement="bottom">
@@ -57,11 +92,6 @@
                         <img style="width: 20px;" src="../assets/img/cha.svg" alt="">
                     </div>
                 </div>
-                <!-- v-if="userinfo.type == 1 && userinfo.role == 1" -->
-                <div :style="{width : CocoFlowList.length ? '' : '187px'}" v-if="CocoFlowList.length < 4" @click="openUsuallyApp" class="footListCon footListCon2">
-                    <div style="margin-bottom: 8px;font-size: 40px;color: #0354D7;">+</div>
-                    <div class="TabListBri">添加常用应用</div>
-                </div> 
             </div>
         </div>
 
@@ -75,7 +105,7 @@
         width="60%"
         :before-close="handleClose">
             <div v-loading="loading" style="display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 16px;height: 300px;overflow: auto;">
-                <div v-for="(item,index) in isAdd(usuallyList)" class="tabCon" @click="addApp(item.id)"  :key="index" style="min-width: 308px;">
+                <div v-for="(item,index) in isAdd(usuallyList)" class="tabCon" @click="addApp(item.id)"  :key="index+'6p'" style="min-width: 308px;">
                         <div class="AppList">
                             <img class="appImg" :src="JSON.parse(item.json).icon" alt="">
                             <div class="con">
@@ -114,6 +144,7 @@ import { API_CONFIG } from "@/common/apiConfig";
               AppCon(){
                 return function(c) {
                     let k = JSON.parse(JSON.stringify(c))
+
                     let data = k.filter(e=>{
                         return e.region == this.userinfo.schoolArea || e.region == this.userinfo.orgArea
                     })
@@ -133,34 +164,29 @@ import { API_CONFIG } from "@/common/apiConfig";
             // 筛选是否为管理员可见，是否被删除
             appSignL(){
                 return function(val){
-                    
                     let data = []
                     if (this.userinfo.type == 1 && this.userinfo.role == 1) {
                         val.forEach( e =>{
                             if (e.menuName || e.status == 0) {
-                               data.push(e)
+                                data.push(e)
                             }
                         })
                     } else {
                         val.forEach( e =>{
                             if (e.menuName || (e.isAdmin == '0' && e.status == 0)) {
-                               data.push(e)
+                                data.push(e)
                             }
                         })
                     }
                     return data
                 }
             },
+            // 判断是否被添加过
             isAdd(){
                 return function(val){
                     const difference = val.filter(item1 => 
                         !this.CocoFlowList.some(item2 => item1.id === item2.id)
                     );
-                    // console.log('difference',difference);
-                    
-                //    let data = val.filter(e=>{
-                //     return !this.CocoFlowList.includes(e.id) 
-                //    })
                     return difference
                 }
             }
@@ -168,16 +194,23 @@ import { API_CONFIG } from "@/common/apiConfig";
         data() {
             return {
                 dialogVisible:false, 
-                //常见ai应用列表
+                //常见ai应用列表（添加弹框）
                 usuallyList:[], 
                 loading:false,
                  //选中应用列表
                 tab:[],
-                // 已添加ai应用数组
-                CocoFlowList:[]
+                // 管理平台添加常见cocoFlow应用
+                admincocoFlow:[],
+                // 用户ai应用数组
+                CocoFlowList:[],
+
+                hovList:[],
             }
         },
         methods: {
+            setHovered(index, value) {
+                this.hovList.splice(index,1,value)
+            },
             // 删除应用
             delApp(val){
                 this.$confirm('确定删除吗', '提示', {
@@ -215,14 +248,14 @@ import { API_CONFIG } from "@/common/apiConfig";
                 this.tab= []
                 this.dialogVisible = false
             },
-            // 弹框选着添加应用
+            // 弹框选择添加应用
             addApp(val){
                 // let data = this.CocoFlowList.filter(e=>{
                 //     return e.id == val 
                 // })
                 // if (data.length != 0) return this.$message.info('常用列表已添加')
                 let kpl = [...this.tab,...this.CocoFlowList]
-                console.log(kpl);
+                // console.log(kpl);
                 
 
                 const index = this.tab.indexOf(val);
@@ -271,7 +304,7 @@ import { API_CONFIG } from "@/common/apiConfig";
                 this.getData()
                 this.handleClose()
             },
-            // 循环添加常见应用
+            // 循环添加用户选择常见应用
             XAdd(val){
                 return new Promise((resolve) => {
                     let params = [
@@ -313,6 +346,29 @@ import { API_CONFIG } from "@/common/apiConfig";
                         this.$message.error("获取工具数据失败");
                     });
             },
+            getAdmincocoFlow(){
+                // console.log('getAdmincocoFlow',this.fromL);
+                
+                // 如果后台预设常用ai工具为0则不执行
+                if (this.fromL.admin.cocoFlow.length == 0) return 
+
+                let params = [
+                    {
+                        functionName: API_CONFIG.ajax_AdminApp.functionName,
+                        con: this.fromL.admin.cocoFlow.join(','), 
+                    },
+                ];
+                
+                this.$ajax
+                    .post(API_CONFIG.baseUrl, params)
+                    .then((res) => {
+                        this.admincocoFlow = res.data[0]
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        this.$message.error("获取工具数据失败");
+                    });
+            },
 
             // 打开平台应用
             async openApp(val){
@@ -391,159 +447,208 @@ import { API_CONFIG } from "@/common/apiConfig";
 </script>
 
 <style scoped>
-.moreDia >>> .el-dialog{
-    border-radius: 10px;
+/* 顶部区域 */
+.topBlock{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
-.moreDia >>> .el-dialog__body{
-    height: 345px;
-    /* overflow: auto; */
-    border-top: 1px #e7e7e7 solid;
+.topTit{
+    font-size: 30px;
+    height: 100%;
+    color: #000;
+    font-weight: 600;
 }
-.conBlock{
-    background-color: #fff;
+.topDetail{
+    color: #64748B;
+    margin-top: 16px;
+}
+
+
+
+
+
+
+
+/* 平台应用 */
+.TabList{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 106px; /* 网格间距 */
+    margin-bottom: 16px;
+}
+.imgApp{
+    width: 120px;
+    height: 140px;
+    object-fit: contain;
+    position: absolute;
+    top: 50%;
+    transform: translate(0,-50%);
+    left: -50px;
+}
+.TabListCon{
+    width: 170px;
+    height: 140px;
     padding: 24px;
     box-sizing: border-box;
-    margin-bottom: 24px;
+    background-color: #fff;
     border-radius: 10px;
-}
-.tabCon{
+    width: 100%;
     transition: all 0.3s ease; /* 统一过渡效果 */
-    border-radius: 10px;
+    /* background-image: radial-gradient(#E6F0FF 1px, transparent 1px); */
+    background-size: 20px 20px;
     cursor: pointer;
-}
-
-.con{
-    flex: 1;
-    margin-left: 12px;
+    box-shadow: 0px 4px 10px 0px #0000000D;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-end;
+    align-items: end;
 }
-.tit{
-    color: #1f2937;font-size: 16px;height: 24px;line-height: 24px;
-    -webkit-line-clamp: 1;
+.TabListCon:hover{
+    transform: translate(-5px,-10px); /* 向上位移 */
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.TabListCon:hover TabListBri{
+    -webkit-line-clamp: 2;
+    width: 150px;
+}
+.TabListName{
+    color: #1f2937;
+    font-size: 16px;
+    font-weight: 600;
+    padding: 5px 0;
+    margin-bottom: 4px;
+    -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.bri{
-    color: #6b7280;font-size: 12px;height: 16px;line-height: 16px;
-    overflow: hidden;
+.TabListBri{
+    color: #4b5563;
+    font-size: 12px;
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.appImg{
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    object-fit: cover;
-}
-.AppList{
-    flex-wrap: wrap;display: flex;
-    justify-content: space-between;
-    border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
-    border-radius: 10px;padding: 16px;box-sizing: border-box;
-    position: relative;
+
+.tabCon{
+    transition: all 0.3s ease; /* 统一过渡效果 */
+    border-radius: 10px;
+    cursor: pointer;
 }
+
+
+
+
+
+/* 常见应用样式 */
 .footCon{
     display: flex;
     justify-content: space-between;
-    padding: 16px;
     box-sizing: border-box;
-    background-color: #eff6ff;
     border-radius: 10px;
-    background-image: radial-gradient(#E6F0FF 1px, transparent 1px);
+    gap: 30px;
+    margin: 80px 0;
+    /* background-image: radial-gradient(#E6F0FF 1px, transparent 1px); */
     background-size: 20px 20px;
 }
-.footListCon2{
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    max-width: 187px;
+
+/* 图片 */
+.footConLeft{
+    /* width: 360px; */
+    flex: 1;
+    box-sizing: border-box;
+}
+.footConLeft img{
+    width: 100%;
+}
+
+/* 中间后面设置应用 */
+.footList{
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px; /* 网格间距 */
+    flex: 2;
 }
 .footListCon{
     background-color: #fff;
     border-radius: 10px;
-    padding: 24px;
+    padding: 16px;
     box-sizing: border-box;
     transition: all 0.3s ease; /* 统一过渡效果 */
-    min-height: 156px;
-    max-width: 187px;
-    background-image: radial-gradient(#E6F0FF 1px, transparent 1px);
+    height: 10vw;
+    width: 10vw;
+    min-height: 146px;
+    max-width: 175px;
+    max-height: 175px;
     background-size: 20px 20px;
     cursor: pointer;
     position: relative;
 }
 .footListCon:hover{
-    transform: translateY(-5px); /* 向上位移 */
+    transform: translate(-5px,-10px); /* 向上位移 */
+
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
+.footListConimg{
+    height: 40%;
+}
 .cha{
     display: none;position: absolute;top: 10px;right: 10px;
 }
 .footListCon:hover .cha{
     display: block;
 }
-.footConLeft{
-    padding: 25px;
-    min-width: 50px;
-    box-sizing: border-box;
-}
-.footList{
+
+/* 添加常见应用区域 */
+.footList2{
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 16px; /* 网格间距 */
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    flex: 1;
+    position: relative;
 }
-.TabList{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 16px; /* 网格间距 */
-    margin-bottom: 16px;
+.footList2Tit{
+    position: absolute;
+    top: -30px;
+    left: 0;
+    font-family: PingFang SC;
+    color: #000;
 }
 
-.TabListCon{
-    width: 170px;
-    height: 140px;
-    padding: 24px;
-    box-sizing: border-box;
-    background-color: #fff;
-    border-radius: 10px;
-    width: 100%;
-    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    transition: all 0.3s ease; /* 统一过渡效果 */
-    background-image: radial-gradient(#E6F0FF 1px, transparent 1px);
-    background-size: 20px 20px;
+.footListCon2{
+    display: flex;
     cursor: pointer;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    border: 1px dashed  #000000;
+    width: 10vw;
+    height: 10vw;
+    min-height: 146px;
+    box-sizing: border-box;
+    max-width: 175px;
+    max-height: 175px;
+    border-radius: 12px;
+    border-width: 1px;
+    background-color: #E5E5E5;
 }
-.TabListCon:hover{
-    transform: translateY(-5px); /* 向上位移 */
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-.TabListName{
-    color: #1f2937;
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 4px;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+
+
+
+/* 弹框 */
+.moreDia >>> .el-dialog{
+    border-radius: 10px;
 }
-.TabListBri{
-    color: #4b5563;
-    font-size: 12px;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.moreDia >>> .el-dialog__body{
+    height: 345px;
+    /* overflow: auto; */
+    border-top: 1px #e7e7e7 solid;
 }
+/* 对号 */
 .top{
     display: flex;
     min-height: 144px;
@@ -556,19 +661,43 @@ import { API_CONFIG } from "@/common/apiConfig";
     border-radius: 10px;
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
 }
-.topBlock{
+
+.AppList{
+    flex-wrap: wrap;display: flex;
+    justify-content: space-between;
+    border: 1px rgb(243 244 246 / var(--tw-border-opacity, 1)) solid;
+    border-radius: 10px;padding: 16px;box-sizing: border-box;
+    position: relative;
+}
+.appImg{
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.con{
+    flex: 1;
+    margin-left: 12px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
 }
-.topTit{
-    font-size: 30px;
-    height: 100%;
-    color: #000;
-    font-weight: 600;
+.tit{
+    color: #1f2937;font-size: 16px;height: 24px;line-height: 24px;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-.topDetail{
-    color: #64748B;
-    margin-top: 16px;
+.bri{
+    color: #6b7280;font-size: 12px;height: 16px;line-height: 16px;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
+
 </style>

src/views/HomeView.vue

@@ -1,17 +1,37 @@
 <template>
   <div class="body">
-    <!-- <div class="top">
-      <div class="title">CocoClass后台管理</div>
-      <div class="person">
-        <div class="person_name">{{ userinfo ? userinfo.username : "" }}</div>
-        <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
-      </div>
-    </div> -->
+   
     <div class="container">
       <div class="leftBar" style="height: 100%;">
         <sidebarL @getPer="getPer" @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress"  ref="sidebarLRef"></sidebarL>
       </div>
       <div class="table-container">
+
+        <div class="top">
+          <div class="topCon">
+            <div class="title">
+              <span v-if="userinfo.orgName">{{userinfo.orgName}}</span >
+              <span style="color: #0663FE;font-weight: 600;">{{ userinfo.schoolName }}</span>
+                
+            </div>
+            <div class="person">
+              <div class="person_name">
+                <img
+                style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%;" 
+                :src="userinfo.headportrait ? userinfo.headportrait : require('../assets/img/toux.png')" alt="">
+                <div class="personInfo">
+                  <div class="personInfoTit">
+                    {{  userinfo.username }}
+                  </div>
+                  <div class="personInfoBri">
+                    {{ userinfo.accountNumber }}
+                  </div>
+                </div>
+              </div>
+              <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
+            </div>
+          </div>
+        </div>
         <!-- <router-view></router-view> -->
          <!-- 首页 -->
          <homepageL @AddAppJson="AddAppJson" :urlAddress.sync="urlAddress" v-show="!appSign" ref="homepageLRef"></homepageL>
@@ -69,30 +89,36 @@ export default {
     ...mapActions({
       logout: 'user/logout'
     }),
+    // 打开平台应用工具
     AddAppJson(val){
       console.log('val',val);
-      this.loading = true
 
-      setTimeout(() => {
-        this.loading = false
-      }, 2000);
-      
+      // 判断有没有打开过这个应用
       let data = this.AppJSon.filter(e=>{
         return val.toolId == e.toolId
       })
-      console.log('data',data);
+     
+
+     
+      
+     
 
-      if (data.length == 0) {
+      // console.log('data',data);
+
+      if (data.length == 0) {   //为0则添加进列表,并将其他的展示状态改为false
+        this.loading = true
+
+        // 打开平台工具加载两秒
+        setTimeout(() => {
+          this.loading = false
+        }, 2000);
         this.AppJSon.forEach(e=>{
           this.$set(e, 'stateL', false); // 使用 Vue.set 确保响应式
         })
-
         this.AppJSon.push(val)
-        
-        
       }else{
         this.AppJSon.forEach(e=>{
-          if (val.toolId == e.toolId) {
+          if (val.toolId == e.toolId) {  //已经打开过了,将点击的工具展示状态改为false
             this.$set(e, 'stateL', true); // 使用 Vue.set 确保响应式
           }else{
             this.$set(e, 'stateL', false); // 确保响应式更新
@@ -127,8 +153,11 @@ export default {
    
     // 获取学校权限与组织权限,优先使用学校权限,其次使用组织权限
     getPer() {
+      // 查询首页应用
       this.$refs.homepageLRef.getData()
+      //查询cocofrow最近使用与收藏
       this.$refs.sidebarLRef.getData()
+
       let params = [
         {
           functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
@@ -146,6 +175,8 @@ export default {
           this.perData= JSON.parse(data[0].json)
           this.getToolData()
 
+
+
         })
         .catch((err) => {
           console.error("请求失败，错误信息：", err);
@@ -197,6 +228,7 @@ export default {
 				let _index = toolList.findIndex((i2) => i == i2.id);
 				if (_index != -1) {
 					_form.admin.index.list[index] = toolList[_index];
+          _form.admin.index.list[index].hovered = false
 				} else {
 					console.log("无工具", i);
 				}
@@ -230,6 +262,8 @@ export default {
 
       // console.log('_form',_form);
       await store.commit('user/SET_FROM', _form)
+      // 获取后台管理设置常见应用
+      this.$refs.homepageLRef.getadmincocoFlow()
       
 			this.$forceUpdate();
 		},
@@ -241,14 +275,61 @@ export default {
 </script>
 
 <style scoped>
-
+.top{
+  width: 100%;
+  padding: 22px 81px;
+  height: 80px;
+  box-sizing: border-box;
+}
+.topCon{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
-
+.title{
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #969BA3;
+  display: flex;
+  gap: 11px;
+}
+.person{
+  display: flex;
+  align-items: center;
+}
+.person_name{
+  display: flex;
+  gap: 9px;
+}
+.personInfo{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.personInfoTit{
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  color: #000000;
+}
+.personInfoBri{
+  font-family: PingFang SC;
+  font-weight: 300;
+  font-size: 10px;
+  line-height: 100%;
+  text-align: center;
+  color: #969BA3;
+}
 .container {
   display: flex;
   width: 100%;

src/views/homepageL.vue

@@ -25,21 +25,28 @@ import { API_CONFIG } from "@/common/apiConfig";
         },
         data() {
             return {
-                CocoFlowList:[],
+                // CocoFlowList:[],
                 hotApp:[],
-                
             }
         },
         
 
         methods: {
+            // 获取后台管理设置常见应用
+            getadmincocoFlow(){
+                this.$refs.topPageRef.getAdmincocoFlow()
+            },
+
+            // 查询首页应用
             getData(){
+                // 获取已添加cocoFlow应用
                 this.$refs.topPageRef.getData()
+
                 let params = [
                     {
-                    functionName: API_CONFIG.ajax_allApp.functionName, // 调用存储过程的名称
-                    uid: this.userinfo.userid, //组织id
-                    cn: this.userinfo.schoolArea ? this.userinfo.schoolArea : this.userinfo.orgArea, //学校id
+                        functionName: API_CONFIG.ajax_allApp.functionName, // 调用存储过程的名称
+                        uid: this.userinfo.userid, 
+                        cn: this.userinfo.schoolArea ? this.userinfo.schoolArea : this.userinfo.orgArea, 
                     },
                 ];
                 
@@ -49,7 +56,7 @@ import { API_CONFIG } from "@/common/apiConfig";
                     .then((res) => {
                         console.log(res);
                         let data = res.data
-                        this.CocoFlowList = data[0]
+                        // this.CocoFlowList = data[0]
                         this.hotApp = [data[1],data[2],data[3],data[4],]
 
                     })
@@ -72,10 +79,11 @@ import { API_CONFIG } from "@/common/apiConfig";
         overflow: auto;
     }
     .packageL{
-        padding: 24px;
+        padding: 10px 81px;
         box-sizing: border-box;
         margin: auto;
-        max-width: 1280px;
+        padding-bottom: 100px;
+        /* max-width: 1280px; */
     }
 
 /* 整个滚动条轨道 */