修改知识库ui

src/assets/copy1.svg

@@ -0,0 +1 @@
+<?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="1741694776614" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15593" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M780.6 127.2H354.4c-63 0-113.8 50.7-113.8 113.8v426.2c0 63 50.7 113.8 113.8 113.8h426.2c63 0 113.8-50.7 113.8-113.8V241c0-63-50.7-113.8-113.8-113.8z m52.4 537c0 29.7-24.3 55.4-55.4 55.4H357.4c-29.7 0-55.4-24.3-55.4-55.4V244c0-29.7 24.3-55.4 55.4-55.4h420.2c29.7 0 55.4 24.3 55.4 55.4v420.2z" fill="#3370FF" p-id="15594"></path><path d="M155.6 279.3c-15.2 0-27 11.8-28.6 25.5v473.5c3.6 65.2 57 116.3 123.1 116.3h464.6c15.1 0 27.4-12.3 28.8-27.4 0-16.4-13.7-28.8-28.8-28.8l-463.1 0.1c-37 0-67.2-30.2-67.2-67.2V308.1c0-16.4-13.7-28.8-28.8-28.8z" fill="#3370FF" p-id="15595"></path></svg>

src/assets/copy2.svg

@@ -0,0 +1 @@
+<?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="1741694786934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15753" id="mx_n_1741694786935" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M780.6 127.2H354.4c-63 0-113.8 50.7-113.8 113.8v426.2c0 63 50.7 113.8 113.8 113.8h426.2c63 0 113.8-50.7 113.8-113.8V241c0-63-50.7-113.8-113.8-113.8z m52.4 537c0 29.7-24.3 55.4-55.4 55.4H357.4c-29.7 0-55.4-24.3-55.4-55.4V244c0-29.7 24.3-55.4 55.4-55.4h420.2c29.7 0 55.4 24.3 55.4 55.4v420.2z" fill="#666666" p-id="15754"></path><path d="M155.6 279.3c-15.2 0-27 11.8-28.6 25.5v473.5c3.6 65.2 57 116.3 123.1 116.3h464.6c15.1 0 27.4-12.3 28.8-27.4 0-16.4-13.7-28.8-28.8-28.8l-463.1 0.1c-37 0-67.2-30.2-67.2-67.2V308.1c0-16.4-13.7-28.8-28.8-28.8z" fill="#666666" p-id="15755"></path></svg>

src/assets/copyFlieG.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 2.22386 2.22386 2 2.5 2H10C10.2761 2 10.5 2.22386 10.5 2.5C10.5 2.77614 10.2761 3 10 3H3V10C3 10.2761 2.77614 10.5 2.5 10.5C2.22386 10.5 2 10.2761 2 10V2.5Z" fill="black" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5.5C5 5.22386 5.22386 5 5.5 5H13.5C13.7761 5 14 5.22386 14 5.5V13.5C14 13.7761 13.7761 14 13.5 14H5.5C5.22386 14 5 13.7761 5 13.5V5.5ZM6 6V13H13V6H6Z" fill="black" fill-opacity="0.9"/>
+</svg>

src/assets/delFlieG.svg

@@ -0,0 +1 @@
+<?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="1741327727665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4207" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500"><path d="M799.2 874.4c0 34.4-28.001 62.4-62.4 62.4H287.2c-34.4 0-62.4-28-62.4-62.4V212h574.4v662.4zM349.6 100c0-7.2 5.6-12.8 12.8-12.8h300c7.2 0 12.8 5.6 12.8 12.8v37.6H349.6V100z m636.8 37.6H749.6V100c0-48.001-39.2-87.2-87.2-87.2h-300c-48 0-87.2 39.199-87.2 87.2v37.6H37.6C16.8 137.6 0 154.4 0 175.2s16.8 37.6 37.6 37.6h112v661.6c0 76 61.6 137.6 137.6 137.6h449.6c76 0 137.6-61.6 137.6-137.6V212h112c20.8 0 37.6-16.8 37.6-37.6s-16.8-36.8-37.6-36.8zM512 824c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6m-175.2 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0.8 20.8 17.6 37.6 37.6 37.6m350.4 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6" fill="#8A8A8A" p-id="4208"></path></svg>

src/assets/listdel.svg

@@ -0,0 +1 @@
+<?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="1741694388514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11465" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M374.268478 393.957312h64.84671v392.331628h-64.84671zM589.581231 393.957312h64.84671v392.331628h-64.84671zM240.05927 5.418945h548.758511v64.84671H240.05927zM71.349444 162.387723h885.816899v64.84671H71.349444z" fill="#D92E21" p-id="11466"></path><path d="M744.201799 1017.858529H284.49462c-71.168813 0-128.970894-57.802081-128.970894-128.970894V194.720762H220.370436v694.166873c0 35.403775 28.720409 64.124184 64.124184 64.124184H744.201799c35.403775 0 64.124184-28.720409 64.124184-64.124184V194.720762h64.846711v694.166873c0 71.168813-57.802081 128.970894-128.970895 128.970894z" fill="#D92E21" p-id="11467"></path></svg>

src/assets/listfolder.svg

@@ -0,0 +1 @@
+<?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="1741159362635" class="icon" viewBox="0 0 1204 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3671" xmlns:xlink="http://www.w3.org/1999/xlink" width="587.890625" height="500"><path d="M561.63235285 164.57352927h335.01838211c27.29779432 0 49.63235285 22.33455854 49.63235366 49.63235284v62.04044147c0 27.29779432-22.33455854 49.63235285-49.63235366 49.63235284H561.63235285c-27.29779432 0-49.63235285-22.33455854-49.63235285-49.63235284v-62.04044147c0-27.29779432 22.33455854-49.63235285 49.63235285-49.63235284z" fill="#AFFCFE" p-id="3672"></path><path d="M983.50735284 933.875H189.38970568c-54.59558862 0-99.26470568-44.66911789-99.26470568-99.26470568V189.38970568c0-54.59558862 44.66911789-99.26470568 99.26470568-99.26470568h285.38602928c68.24448496 18.61213211 54.59558862 53.35477927 99.2647065 99.26470568l31.02021992 49.63235286H983.50735284c54.59558862 0 99.26470568 44.66911789 99.26470569 99.2647065v496.32352928c0 54.59558862-44.66911789 99.26470568-99.26470569 99.26470568z" fill="#2F77F1" p-id="3673"></path></svg>

src/assets/listfolder2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none">
+    <path
+        d="M4.61611 2.88843C3.18017 2.88843 2.01611 4.05249 2.01611 5.48843V17.7115C2.01611 19.5892 3.53835 21.1115 5.41612 21.1115H19.7162C21.594 21.1115 23.1162 19.5892 23.1162 17.7115V9.15457C23.1162 7.27681 21.594 5.75457 19.7162 5.75457H13.6589L12.8388 4.17982C12.4254 3.38621 11.6049 2.88843 10.7101 2.88843H4.61611Z"
+        fill="#FDB022" />
+</svg>

src/assets/look1.svg

@@ -0,0 +1 @@
+<?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="1741694679127" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13754" id="mx_n_1741694679128" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M455.68 770.56c-169.472 0-307.2-137.728-307.2-307.2s137.728-306.688 307.2-306.688 307.2 137.728 307.2 306.688c-0.512 169.472-138.24 307.2-307.2 307.2z m0-547.328c-132.608 0-240.64 108.032-240.64 240.128 0 132.608 108.032 240.64 240.64 240.64s240.64-108.032 240.64-240.64c-0.512-132.608-108.544-240.128-240.64-240.128zM855.04 888.32c-8.704 0-16.896-3.072-23.552-9.728l-113.664-113.664c-12.8-12.8-12.8-34.304 0-47.104 12.8-12.8 34.304-12.8 47.104 0l113.664 113.664c12.8 12.8 12.8 34.304 0 47.104-6.656 6.656-14.848 9.728-23.552 9.728z" p-id="13755"></path></svg>

src/assets/look2.svg

@@ -0,0 +1 @@
+<?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="1741694679127" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13754" id="mx_n_1741694679128" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M455.68 770.56c-169.472 0-307.2-137.728-307.2-307.2s137.728-306.688 307.2-306.688 307.2 137.728 307.2 306.688c-0.512 169.472-138.24 307.2-307.2 307.2z m0-547.328c-132.608 0-240.64 108.032-240.64 240.128 0 132.608 108.032 240.64 240.64 240.64s240.64-108.032 240.64-240.64c-0.512-132.608-108.544-240.128-240.64-240.128zM855.04 888.32c-8.704 0-16.896-3.072-23.552-9.728l-113.664-113.664c-12.8-12.8-12.8-34.304 0-47.104 12.8-12.8 34.304-12.8 47.104 0l113.664 113.664c12.8 12.8 12.8 34.304 0 47.104-6.656 6.656-14.848 9.728-23.552 9.728z" p-id="13755" fill="#3370FF"></path></svg>

src/assets/siyou.svg

@@ -0,0 +1 @@
+<?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="1741693789246" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10458" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M790.592 583.616c59.264 0 107.52 46.336 108.544 104.128v19.456h15.296c23.68 0 43.2 17.792 44.928 40.768l0.064 1.28v166.4a44.48 44.48 0 0 1-44.992 43.84h-247.68a44.48 44.48 0 0 1-45.12-43.84v-164.608c0-24.192 20.224-43.84 45.12-43.84h15.232v-19.712c0.96-57.6 49.28-103.872 108.608-103.872zM360.512 506.88L358.4 505.6a237.888 237.888 0 0 1-113.024-198.912v-2.56c0-132.416 110.336-239.68 246.528-239.68 136.128 0 246.528 107.264 246.528 239.616 0 82.56-43.264 157.76-113.088 201.472l-2.112 1.28 4.8 1.536 9.92 3.392 4.864 1.792c17.984 6.592 27.072 26.112 20.288 43.52a35.072 35.072 0 0 1-44.8 19.712 366.08 366.08 0 0 0-126.4-22.336c-197.632 0-357.824 155.712-357.824 347.776a34.304 34.304 0 0 1-34.752 33.792 34.304 34.304 0 0 1-34.816-33.792c0-177.92 116.16-333.952 285.184-391.808l14.08-4.608-3.264 1.088z m539.84 257.664h-219.52v137.408h219.52v-137.408z m-112.256 9.088c16.192 0 29.312 12.288 29.568 27.904v63.168c0 15.616-13.248 28.16-29.568 28.16a28.928 28.928 0 0 1-29.568-27.904v-63.168c0-15.616 13.312-28.16 29.568-28.16z m2.432-132.608h-1.408c-27.2 0.704-49.216 21.632-49.664 47.36v18.688h102.208v-17.664c0-25.792-21.312-46.976-48.32-48.32h-1.408l-1.408-0.064zM491.904 132.16c-97.728 0-176.96 76.992-176.96 171.968 0 95.04 79.232 172.032 176.96 172.032 97.728 0 176.96-76.992 176.96-172.032 0-94.976-79.232-171.968-176.96-171.968z" p-id="10459"></path></svg>

src/assets/siyou1.svg

@@ -0,0 +1 @@
+<?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="1741748992423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1700" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M825.051 322.267c43.155 0 78.263 35.109 78.263 78.263v544.695c0 43.154-35.108 78.263-78.263 78.263H152.357c-43.155 0-78.263-35.109-78.263-78.263V400.457c0-43.154 35.108-78.19 78.263-78.19h87.405v-72.85c0-66.34 25.893-128.731 73.07-175.908A247.223 247.223 0 0 1 488.667 0.439c66.341 0 128.732 25.966 175.909 73.143a247.223 247.223 0 0 1 73.143 175.835v72.85h87.406z m-503.222-72.85v72.85h333.385v-72.85c0-44.251-17.335-86.089-49.006-117.687a165.669 165.669 0 0 0-235.374 0c-31.451 31.452-49.005 73.436-49.005 117.76z m499.273 691.785V404.48H156.233v536.722h664.869zM584.558 617.033c0 39.936-24.43 74.313-59.246 88.576v92.453a36.718 36.718 0 0 1-73.29 0v-92.453a95.817 95.817 0 0 1 36.645-184.466 95.817 95.817 0 0 1 95.89 95.817z" fill="#999999" p-id="1701"></path></svg>

src/assets/siyou2.svg

@@ -0,0 +1 @@
+<?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="1741749010931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2760" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M483.2 483.2H243.2C108.8 483.2 3.2 374.4 3.2 243.2S112 3.2 243.2 3.2s240 108.8 240 240v240zM240 64C144 64 64 144 64 240S144 416 240 416H416V240c3.2-96-76.8-176-176-176zM784 483.2H544V243.2C544 108.8 652.8 3.2 784 3.2S1024 112 1024 243.2s-108.8 240-240 240z m-179.2-64h176c96 0 176-80 176-176S880 64 784 64 608 144 608 240v179.2zM240 1024C105.6 1024 0 915.2 0 784S108.8 544 240 544H480v240c3.2 131.2-105.6 240-240 240z m0-419.2c-96 0-176 80-176 176s80 176 176 176 176-80 176-176v-176H240zM784 1024c-134.4 0-240-108.8-240-240V544h240c134.4 0 240 108.8 240 240S915.2 1024 784 1024z m-179.2-419.2v176c0 96 80 176 176 176s176-80 176-176-80-176-176-176h-176z" fill="#666666" p-id="2761"></path></svg>

src/assets/siyou3.svg

@@ -0,0 +1 @@
+<?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="1741749112922" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8458" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M136 136h240v240H136V136zM96 64c-17.673 0-32 14.327-32 32v320c0 17.673 14.327 32 32 32h320c17.673 0 32-14.327 32-32V96c0-17.673-14.327-32-32-32H96zM648 648h240v240H648V648z m-40-72c-17.673 0-32 14.327-32 32v320c0 17.673 14.327 32 32 32h320c17.673 0 32-14.327 32-32V608c0-17.673-14.327-32-32-32H608z" fill="#707070" p-id="8459"></path><path d="M220 426h72v342h-72V426z" fill="#707070" p-id="8460"></path><path d="M606 732v72H252c-17.673 0-32-14.327-32-32v-40h386z" fill="#707070" p-id="8461"></path></svg>

src/assets/tqList.svg

@@ -0,0 +1 @@
+<?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="1741763366244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8791" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M897.39 611.474V859.43H130.853V611.474a50.322 50.322 0 0 0-100.572 0v288.549c0 32.987 26.99 59.977 59.977 59.977h847.726c32.987 0 59.977-26.99 59.977-59.977V611.4a50.322 50.322 0 0 0-100.571 0zM478.5 81.554L291.11 269.02a50.469 50.469 0 0 0 0 71.095 50.469 50.469 0 0 0 71.094 0l97.866-98.011v359.863a54.126 54.126 0 0 0 53.906 53.906 54.126 54.126 0 0 0 53.98-53.906V242.249l97.938 98.012a50.469 50.469 0 0 0 71.094 0 50.469 50.469 0 0 0 0-71.095L549.595 81.7a50.322 50.322 0 0 0-71.094-0.074z" p-id="8792" fill="#707070"></path></svg>

src/assets/tqList2.svg

@@ -0,0 +1 @@
+<?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="1741763366244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8791" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M897.39 611.474V859.43H130.853V611.474a50.322 50.322 0 0 0-100.572 0v288.549c0 32.987 26.99 59.977 59.977 59.977h847.726c32.987 0 59.977-26.99 59.977-59.977V611.4a50.322 50.322 0 0 0-100.571 0zM478.5 81.554L291.11 269.02a50.469 50.469 0 0 0 0 71.095 50.469 50.469 0 0 0 71.094 0l97.866-98.011v359.863a54.126 54.126 0 0 0 53.906 53.906 54.126 54.126 0 0 0 53.98-53.906V242.249l97.938 98.012a50.469 50.469 0 0 0 71.094 0 50.469 50.469 0 0 0 0-71.095L549.595 81.7a50.322 50.322 0 0 0-71.094-0.074z" p-id="8792" fill="#4079FF"></path></svg>

src/assets/xiugai.svg

@@ -0,0 +1 @@
+<?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="1741837582836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2632" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M855.04 994.304H174.08c-78.848 0-143.36-64.512-143.36-143.36v-680.96c0-78.848 64.512-143.36 143.36-143.36h578.56c22.528 0 40.96 18.432 40.96 40.96s-18.432 40.96-40.96 40.96H174.08c-33.792 0-61.44 27.648-61.44 61.44v680.96c0 33.792 27.648 61.44 61.44 61.44h680.96c33.792 0 61.44-27.648 61.44-61.44v-450.56c0-22.528 18.432-40.96 40.96-40.96s40.96 18.432 40.96 40.96v450.56c0 78.848-64 143.36-143.36 143.36z" fill="#333333" p-id="2633"></path><path d="M378.368 757.76c-10.24 0-20.992-4.096-29.184-11.776-15.872-15.872-15.872-41.984 0-57.856L928.768 108.544c15.872-15.872 41.984-15.872 57.856 0 15.872 15.872 15.872 41.984 0 57.856L407.552 745.984c-8.192 7.68-18.432 11.776-29.184 11.776z" fill="#333333" p-id="2634"></path></svg>

src/assets/yichu.svg

@@ -0,0 +1 @@
+<?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="1741833799788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 929.28c-112.128 0-217.088-43.52-296.448-122.368-79.36-78.848-122.88-183.808-122.88-294.912 0-111.616 43.52-216.576 122.88-294.912C294.912 138.24 399.872 94.72 512 94.72s217.088 43.52 296.448 122.368c79.36 78.848 122.88 183.808 122.88 294.912 0 111.616-43.52 216.576-122.88 294.912-79.36 78.848-184.32 122.368-296.448 122.368z m0-771.072c-95.232 0-184.32 36.864-251.392 103.936-67.584 66.56-104.448 155.136-104.448 249.856s36.864 183.296 103.936 250.368c67.072 67.072 156.672 103.936 251.392 103.936 95.232 0 184.32-36.864 251.392-103.936 67.072-67.072 103.936-155.648 103.936-250.368s-36.864-183.296-103.936-250.368c-66.56-66.56-155.648-103.424-250.88-103.424z" fill="#515151" p-id="3120"></path><path d="M725.504 480.256H298.496c-17.92 0-32.256 14.336-32.256 32.256s14.336 32.256 32.256 32.256h427.008c17.92 0 32.256-14.336 32.256-32.256s-14.336-32.256-32.256-32.256z" fill="#515151" p-id="3121"></path></svg>

src/assets/yichu2.svg

@@ -0,0 +1 @@
+<?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="1741833799788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3119" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 929.28c-112.128 0-217.088-43.52-296.448-122.368-79.36-78.848-122.88-183.808-122.88-294.912 0-111.616 43.52-216.576 122.88-294.912C294.912 138.24 399.872 94.72 512 94.72s217.088 43.52 296.448 122.368c79.36 78.848 122.88 183.808 122.88 294.912 0 111.616-43.52 216.576-122.88 294.912-79.36 78.848-184.32 122.368-296.448 122.368z m0-771.072c-95.232 0-184.32 36.864-251.392 103.936-67.584 66.56-104.448 155.136-104.448 249.856s36.864 183.296 103.936 250.368c67.072 67.072 156.672 103.936 251.392 103.936 95.232 0 184.32-36.864 251.392-103.936 67.072-67.072 103.936-155.648 103.936-250.368s-36.864-183.296-103.936-250.368c-66.56-66.56-155.648-103.424-250.88-103.424z" fill="#4079FF" p-id="3120"></path><path d="M725.504 480.256H298.496c-17.92 0-32.256 14.336-32.256 32.256s14.336 32.256 32.256 32.256h427.008c17.92 0 32.256-14.336 32.256-32.256s-14.336-32.256-32.256-32.256z" fill="#4079FF" p-id="3121"></path></svg>

src/components/pages/knowledge/fileBox.vue

@@ -1,28 +1,11 @@
 <template>
   <div class="f_box" @dragover.prevent @drop="handleDrop">
-    <div class="f_box_top">
+    <!-- <div class="f_box_top">
       <div class="f_box_top_left">
         <div class="f_box_top_title">所有文件</div>
       </div>
-      <div class="f_box_top_right">
-        <span v-if="checkArray.length" style="margin-right: 10px;color: #b0b0b0;font-size: 14px;">已选文件{{checkArray.length}}个</span>
-        <el-button type="primary" size="small" @click="serchFile"
-          >刷新</el-button
-        >
-        <el-button type="primary" size="small" @click="addImg($event)"
-          >上传文件
-          <input
-            type="file"
-            accept="*"
-            style="display: none"
-            multiple="multiple"
-            @change="beforeUpload($event)"
-        /></el-button>
-        <el-button type="danger" size="small" @click="batchDelete"
-          >删除</el-button
-        >
-      </div>
-    </div>
+
+    </div> -->
     <div class="f_box_top">
       <div class="f_box_top_left">
         <!-- <el-select v-model="checkFolderid" filterable multiple @change="serchFile">
@@ -44,14 +27,36 @@
       </div>
       <div class="f_box_top_right">
         <div class="input">
+          <div class="serch"></div>
           <input
             type="text"
             v-model="fileName"
             placeholder="请输入你需要搜索的文件名字"
             @input="debouncedSearch"
           />
-          <div class="serch"></div>
         </div>
+        <div class="f_box_top_right">
+          <el-button type="primary" size="small" @click="serchFile"
+          style="background-color: rgb(51, 112, 255);"
+            >刷新</el-button
+          >
+          <el-button type="primary" size="small" @click="addImg($event)"
+          icon="el-icon-plus"
+          style="background-color: rgb(51, 112, 255);"
+            >上传文件
+            <input
+              type="file"
+              accept="*"
+              style="display: none"
+              multiple="multiple"
+              @change="beforeUpload($event)"
+          /></el-button>
+          <el-button type="danger" size="small" v-if="checkArray.length" @click="batchDelete"
+            >删除</el-button
+          >
+          <span v-if="checkArray.length" style="margin-left: 12px;color: #b0b0b0;font-size: 14px;">已选文件{{checkArray.length}}个</span>
+
+      </div>
       </div>
     </div>
     <div class="none_box" v-if="fileArray.length == 0">暂无上传文件</div>
@@ -64,7 +69,6 @@
         <el-table
           :data="fileArray"
           border
-          stripe
           style="width: 100%"
           @selection-change="handleSelectionChange"
           :row-key="row => row.id"
@@ -82,23 +86,24 @@
             min-width="15"
           ></el-table-column>
           <el-table-column
-            prop="username"
-            label="拥有者"
+            prop="folderName"
+            label="所属文件夹"
             show-overflow-tooltip
             min-width="20"
           ></el-table-column>
           <el-table-column
-            prop="folderName"
-            label="所属文件夹"
+            prop="username"
+            label="拥有者"
             show-overflow-tooltip
-            min-width="20"
+            width="120"
           ></el-table-column>
-          <el-table-column label="处理状态" width="80px">
+         
+          <el-table-column label="处理状态" width="120px">
             <template slot-scope="scope">
               {{ getState(scope.row.ingestionStatus) }}
             </template>
           </el-table-column>
-          <el-table-column label="是否提取" width="80px">
+          <el-table-column label="是否提取" width="120px">
             <template slot-scope="scope">
               {{ getState2(scope.row.extractionStatus) }}
             </template>
@@ -107,7 +112,7 @@
             prop="documentType"
             label="文件类型"
             show-overflow-tooltip
-            min-width="10"
+            width="120"
           ></el-table-column>
           <!-- <el-table-column label="公开状态" show-overflow-tooltip width="80px"></el-table-column> -->
           <el-table-column
@@ -116,31 +121,77 @@
             show-overflow-tooltip
             min-width="20"
           ></el-table-column>
-          <el-table-column label="操作" width="250px">
+          <el-table-column align="center" width="100px">
             <template slot-scope="scope">
-              <div>
-                <el-button
-                  type="primary"
-                  size="small"
-                  @click="extractFile(scope.row)"
-                  :disabled="scope.row.ingestionStatus == 'failed'"
-                  >提取</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="small"
-                  @click="checkFile(scope.row)"
-                  :disabled="scope.row.ingestionStatus == 'failed'"
-                  >查看</el-button
-                >
-                <el-button
-                  type="danger"
-                  size="small"
-                  v-if="scope.row.userid == userid"
-                  @click="deleteFile(scope.row.id, scope.row.documentid)"
-                  >删除</el-button
-                >
+              <el-popover
+                  placement="bottom-end"
+                  trigger="hover"
+                  visible-arrow
+                  popper-class="custom-popover"
+                  width="100px"
+                  >
+                  <div class="BtnHP">
+                    <div class="BtnHPDel1">
+                    
+                      <!-- <el-button
+                        type="text"
+                        size="small"
+                        @click="extractFile(scope.row)"
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        >提取</el-button
+                      > -->
+                      <div class="btnBh" 
+                       @click="extractFile(scope.row)"
+                        @mouseover="isHover = true"
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        @mouseleave="isHover = false">
+                        <img 
+                        style="width: 14px;"
+                        :src="isHover ? tqList2 : tqList" 
+                         alt="">
+                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">提取</span>
+                      </div>
+                      <!-- <el-button
+                        type="text"
+                        size="small"
+                        @click="checkFile(scope.row)"
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        >查看</el-button
+                      > -->
+
+                      <div class="btnBh" 
+                      @click="checkFile(scope.row)"
+                        @mouseover="isHover2 = true"
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        @mouseleave="isHover2 = false">
+                        <img 
+                        :src="isHover2 ? look2 : look1" 
+                         alt="">
+                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">查看</span>
+                      </div>
+                    </div>
+                    <div style="background-color: #e7e7e7;width: 100%;height: .5px;margin: 5px 0;"></div>
+                    <div class="BtnHPDel">
+                      <!-- <el-button
+                        type="text"
+                        size="small"
+                        v-if="scope.row.userid == userid"
+                        @click="deleteFile(scope.row.id, scope.row.documentid)"
+                        >删除</el-button
+                      > -->
+                      <div class="btnBh2" 
+                      @click="deleteFile(scope.row.id, scope.row.documentid)"
+                      v-if="scope.row.userid == userid">
+                        <img src="../../../assets/listdel.svg" alt="">
+                        <span style="color: #DE4C41;">删除</span>
+                      </div>
+                    </div>
               </div>
+                <el-button slot="reference" class="BtnH" style="border: none;padding: 5px;">
+                    <i class="el-icon-more"></i>
+                  </el-button>
+
+                </el-popover>
             </template>
           </el-table-column>
         </el-table>
@@ -182,6 +233,13 @@ import checkImg from "../../../assets/icon/sourceFile/check.png";
 import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
 import selectTag from "./components/selectTag3.vue";
 
+// 导入SVG组件
+import look1 from '../../../assets/look1.svg';
+import look2 from '../../../assets/look2.svg';
+import tqList2 from '../../../assets/tqList2.svg';
+import tqList from '../../../assets/tqList.svg';
+
+
 import wVideo from "../test/file/wVideo.vue";
 import wpdf from "../test/file/wPdf2.vue";
 import wOffice from "../test/file/wOffice.vue";
@@ -232,6 +290,12 @@ export default {
   },
   data() {
     return {
+      look1:look1,
+      look2:look2,
+      tqList2:tqList2,
+      tqList:tqList,
+      isHover:false,
+      isHover2:false,
       isLoading: false,
       proVisible: false,
       stype: 2,
@@ -520,9 +584,13 @@ export default {
 <style scoped>
 .f_box {
   width: 100%;
-  /* height: 100%; */
+  height: calc(100% - 58px);
+  background-color: #fff;
+  border-radius: 8px;
   position: relative;
   min-height: 400px;
+  margin-top: 16px;
+  box-shadow: 0px 4px 4px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08);
 }
 
 .f_box_top {
@@ -531,6 +599,7 @@ export default {
   padding: 10px;
   width: 100%;
   box-sizing: border-box;
+  padding-bottom: 0;
 }
 
 .f_box_top_left {
@@ -539,7 +608,12 @@ export default {
 }
 
 .f_box_top_title {
-  font-size: 16px;
+  /* font-size: 16px; */
+  color: rgba(8, 13, 30, .9);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  /* line-height: 32px; */
   /* font-weight: bold; */
 }
 
@@ -590,11 +664,19 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.f_box_top_right >>> .el-icon-plus:before {
+  font-size: 14px;
+  font-weight: 600;
+  /* vertical-align: middle;  */
+}
+.f_box_top_right >>>.el-button--primary:focus,.f_box_top_right>>> .el-button--primary:hover{
+  filter: brightness(120%);
+}
 .f_box_top_right > .input {
   position: relative;
   width: 280px;
   height: 40px;
+  margin-right: 12px;
 }
 
 .f_box_top_right > .input > input {
@@ -602,12 +684,16 @@ export default {
   height: 100%;
   border: 1px solid #dcdfe6;
   border-radius: 5px;
-  padding: 0 45px 0 15px;
+  padding: 0 15px 0 45px;
   box-sizing: border-box;
   font-size: 14px;
   outline: none;
 }
 
+.f_box_top_right >>> .el-button{
+  height: 38px !important;
+  font-size: 14px;
+}
 .f_box_top_right > .input > .serch {
   content: "";
   display: block;
@@ -616,7 +702,7 @@ export default {
   background-image: url("../../../assets/icon/sourceFile/search.png");
   background-size: 100% 100%;
   position: absolute;
-  right: 13px;
+  left: 13px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
@@ -807,10 +893,12 @@ export default {
   padding: 10px;
   box-sizing: border-box;
 }
-
-.f_box_file_list > .f_box_file {
+.f_box_file_list >>> .el-table-column--selection .cell{
+    display: flex !important;
+    align-items: center !important;
 }
 
+
 .f_box_file_allCheck {
   display: flex;
   align-items: center;
@@ -955,4 +1043,144 @@ export default {
 .pageBox >>> .el-pagination__total{
   margin-right: auto;
 }
+.list_file_box >>>table th{
+  border:none !important;
+  background-color: #F0F2F5 !important; /* 浅灰色背景 */
+  color: #00000099 !important;
+}
+.list_file_box >>>table tr td{
+  border:none !important;
+  border-bottom: 1px solid #EBEEF5 !important;
+}
+
+.list_file_box >>>table tr {
+  border:1px #000 solid !important;
+}
+
+.list_file_box >>> .el-table__header-wrapper{
+  margin-bottom: 10px !important;
+}
+
+.list_file_box >>> .el-table__row{
+  border: 1px #ccc solid;
+}
+.list_file_box >>>table tr td:nth-child(1){
+  border-radius: 10px 0 0 10px !important;
+}
+.list_file_box >>>table tr td:nth-last-child(1){
+  border-radius: 0 10px 10px 0 !important;
+}
+
+.list_file_box >>>table tr th:nth-child(1){
+  border-radius: 10px 0 0 10px;
+}
+
+.list_file_box >>>table tr th:nth-last-child(2){
+  border-radius: 0 10px 10px 0 !important;
+}
+.list_file_box >>>.el-table::before{
+  background-color: #fff;
+}
+.list_file_box >>>.el-table--border::after{
+  background-color: #fff;
+}
+.list_file_box >>> .el-table--border{
+  border: none;
+  border-bottom: 1px solid #EBEEF5;
+}
+.BtnH >>> .el-button{
+  padding: 5px !important;
+  width: 30px !important;
+  color: #4C5567;
+}
+.BtnH >>> .el-button:focus,.BtnH >>> .el-button:hover{
+  background: #E8EBF0 !important;
+  color: #487FFF !important;
+}
+
+
+.BtnHPDel1 >>> .el-button:focus, .BtnHPDel1 >>> .el-button:hover{
+  background: #F0F4FF ;
+  color: #082e86 !important;
+}
+
+.BtnHPDel >>> .el-button:focus,.BtnHPDel >>> .el-button:hover{
+  background: #FBEAE8 !important;
+  color: #DE4C41 !important;
+}
+
+.BtnH >>> .el-button--small, .el-button--small.is-round{
+  border: none;
+  padding: 0;
+}
+.BtnHP{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHPDel{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHPDel1{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHP >>> .el-button{
+  color: #4C5567;
+  margin-left: 0 !important;
+}
+.BtnHP >>>.el-popper .popper__arrow, .el-popper .popper__arrow::after{
+  display: none;
+}
+.btnBh{
+  display: flex;
+  /* align-items: center; */
+  justify-content: center;
+  cursor: pointer;
+  /* height: 28px; */
+  padding: 4px 10px;
+  border-radius: 5px;
+}
+.btnBh:hover{
+  background: #F0F4FF;
+}
+.btnBh img{
+  margin-right: 5px;
+  width: 17px;
+}
+.btnBh2{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 5px;
+}
+.btnBh2 img{
+  width: 14px;
+  margin-right: 5px;
+}
+.btnBh2:hover{
+  background: #FBEAE8;
+}
+.lookHp2{
+  color: #6c6c6c;
+}
+.lookHp2{
+  color: #487FFF;
+}
+
+</style>
+
+<style>
+.custom-popover {
+  min-width: 88px !important;
+  width: auto !important;
+  padding: 8px;
+}
 </style>
+

src/components/pages/knowledge/folder.vue

@@ -1,20 +1,13 @@
 <template>
-  <div class="f_box">
-    <div class="f_box_top">
+  <div class="f_box"  :style="{'background': stype2 == 2 ? '#fff' :'','padding':  stype2 == 2 ? '10px' :''}">
+    <!-- <div class="f_box_top" >
       <div class="f_box_top_left">
         <div class="f_box_top_title">
           所有文件夹
         </div>
       </div>
-      <div class="f_box_top_right">
-        <span v-if="checkArray.length" style="margin-right: 10px;color: #b0b0b0;font-size: 14px;">已选文件夹{{checkArray.length}}个</span>
-        <el-button type="primary" size="small" @click="openAdd"
-          >新建文件夹</el-button>
-        <el-button type="danger" size="small" @click="deleteFolder"
-          >删除</el-button
-        >
-      </div>
-    </div>
+     
+    </div> -->
     <div class="f_box_top">
       <div class="f_box_top_left">
         <el-select
@@ -68,17 +61,34 @@
         </el-select>
       </div>
       <div class="f_box_top_right">
-        <div class="input">
+        <div>
+          <div class="left" style="display: flex;justify-content: flex-end;padding: 10px 12px;">
+          <span class="list" :class="{ active: stype2 == 1 }" @click="checkStype2(1)"></span>
+          <span class="table" :class="{ active: stype2 == 2 }" @click="checkStype2(2)"></span>
+        </div>
+        </div>
+        <div class="input" style="margin-right: 12px;">
+          <div class="serch"></div>
           <input
             type="text"
             v-model="fileName"
             placeholder="请输入你需要搜索的文件夹名字"
             @input="debouncedSearch"
           />
-          <div class="serch"></div>
+        </div>
+        <div class="f_box_top_right">
+          <el-button type="primary"
+          style="background-color: #3370FF;height: 38px;" size="small" @click="openAdd"
+          icon="el-icon-plus"
+            >新建文件夹</el-button>
+          <el-button style="height: 38px;margin-right: 12px;" type="danger" v-if="checkArray.length && stype2 == 2" size="small" @click="deleteFolder"
+            >删除</el-button
+          >
+          <span v-if="checkArray.length && stype2 == 2" style="margin-right: 10px;color: #b0b0b0;font-size: 14px;">已选文件夹{{checkArray.length}}个</span>
         </div>
       </div>
     </div>
+    
     <div class="none_box" v-if="fileArray.length == 0">
       暂无文件夹
     </div>
@@ -87,12 +97,126 @@
       v-else-if="stype == '2' && fileArray.length"
       v-loading.body="isLoading"
     >
-      <div class="list_file_box">
+
+    <!-- 切换样式 -->
+     <div v-if="stype2 == 1" class="listBlockS" :style="{'grid-template-columns': `repeat(${lisTnum}, 1fr)`}">
+        <div class="listBlock"  @click="editFile(item.id, item.folderid)" v-for="(item,index) in fileArray" :key="index">
+          <div class="listBlockTit">
+            <div class="listBlockTit">
+              <img style="width: 28px;height: 28px;" src="../../../assets/listfolder2.svg" alt="">
+              <div class="listBlockTitZ" style="margin-left: 5px;color: #111824;">{{ item.name }}</div>
+            </div>
+            
+          </div>
+          <div class="listDetail">
+            <span v-if="!item.detail">暂无描述~</span>
+            <div class="listDetail2" v-else>
+              {{ item.detail }} 
+            </div>
+          </div>
+          <div class="listBlockTit">
+            <div class="owerCon" >
+                <div style="display: flex;align-items: center;margin-right: 10px;">
+                  <img  src="../../../assets/owerlogo.png" alt="">
+                  {{ item.username }}
+                </div>
+                <div style="display: flex;align-items: center;margin-right: 10px;flex-shrink: 0;">
+                  <img v-if="item.juri == 1" style="width: 13px;" src="../../../assets/siyou1.svg" alt="">
+                  <img v-if="item.juri == 2" style="width: 13px;" src="../../../assets/siyou2.svg" alt="">
+                  <img v-if="item.juri == 3" style="width: 13px;" src="../../../assets/siyou3.svg" alt="">
+                  {{ getJuri(item.juri) }}
+                </div>
+                <div class="listTag">
+                  {{ item.subTagName }}
+                </div>
+            </div>
+            <div >
+              <el-popover
+                placement="bottom-start"
+                trigger="hover"
+                popper-class="custom-popover"
+                visible-arrow
+                width="100px"
+                >
+                <div class="BtnHP" >
+                  <div class="BtnHPDel">
+                    <!-- <el-button
+                      @click="editFile(item.id, item.folderid)"
+                      size="small"
+                      type="text"
+                      @mouseover="isHover = true"
+                      @mouseleave="isHover = false"
+                      > -->
+                      
+                      <div class="btnBh" 
+                       @click="editFile(item.id, item.folderid)"
+                        @mouseover="isHover = true"
+                        @mouseleave="isHover = false">
+                        <img 
+                          :src="isHover ? look2 : look1" 
+                          
+                        >
+                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">查看</span>
+                      </div>
+                      <!-- </el-button
+                    > -->
+                    <!-- <el-button
+                      @click="copyFolder(item)"
+                      size="small"
+                      type="text"
+                      v-if="item.isMo == '2'"
+                      > -->
+                      <div class="btnBh" 
+                      v-if="item.isMo == '2'"
+                       @click="copyFolder(item)"
+                        @mouseover="isHover2 = true"
+                        @mouseleave="isHover2 = false">
+                        <img 
+                        :src="isHover2 ? copy1 : copy2" 
+                         alt="">
+                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">复制</span>
+                      </div>
+                      <!-- </el-button > -->
+                  </div>
+
+                  <div v-if="item.userid == userid && item.isMo == '2'"
+                  style="background-color: #e7e7e7;width: 100%;height: .5px;margin: 5px 0;">
+                  </div>
+
+                  <div class="BtnHPDel1">
+                    <!-- <el-button
+                      @click="deleteFile(item.id, item.folderid)"
+                      size="small"
+                      type="text"
+                      style="color: #DE4C41;"
+                      v-if="item.userid == userid && item.isMo == '2'"
+                      > -->
+                      <div class="btnBh2" 
+                      @click="deleteFile(item.id, item.folderid,1)"
+                       v-if="item.userid == userid && item.isMo == '2'">
+                        <img src="../../../assets/listdel.svg" alt="">
+                        <span style="color: #DE4C41;">删除</span>
+                      </div>
+                       <!-- </el-button
+                    > -->
+                  </div>
+                </div>
+                <el-button slot="reference" class="BtnH" style="border: none;padding: 5px;">
+                  <i class="el-icon-more"></i>
+                </el-button>
+              </el-popover>
+            </div>
+          </div>
+         
+          
+        </div>
+      
+     </div>
+      <div v-else class="list_file_box">
         <el-table
           ref="myTable"
           :data="fileArray"
           border
-          stripe
           style="width: 100%"
           @selection-change="handleSelectionChange"
           :row-key="row => row.id"
@@ -118,20 +242,22 @@
           <el-table-column
             prop="fileCount"
             label="文件数"
-            width="80px"
+            align="center"
+            width="100px"
           ></el-table-column>
           <el-table-column
             prop="username"
             label="拥有者"
+            align="center"
             show-overflow-tooltip
             min-width="10"
           ></el-table-column>
-          <el-table-column label="标签" show-overflow-tooltip min-width="10">
+          <el-table-column label="标签" align="center" show-overflow-tooltip min-width="10">
             <template slot-scope="scope">
               {{ getTag(scope.row) }}
             </template>
           </el-table-column>
-          <el-table-column label="公开权限" width="80px">
+          <el-table-column label="公开权限" align="center" width="120px">
             <template slot-scope="scope">
               {{ getJuri(scope.row.juri) }}
             </template>
@@ -141,34 +267,94 @@
             label="编辑时间"
             min-width="15"
           ></el-table-column>
-          <el-table-column label="操作" width="280px">
+          <el-table-column align="center"  width="100px">
             <template slot-scope="scope">
-              <div>
-                <el-button
-                  @click="editFile(scope.row.id, scope.row.folderid)"
-                  type="primary"
-                  size="small"
-                  >查看</el-button
-                >
-                 <el-button
-                  @click="copyFolder(scope.row)"
-                  type="primary"
-                  size="small"
-                  v-if="scope.row.isMo == '2'"
-                  >复制</el-button
-                >
-                <el-button
-                  @click="deleteFile(scope.row.id, scope.row.folderid)"
-                  type="danger"
-                  size="small"
-                  v-if="scope.row.userid == userid && scope.row.isMo == '2'"
-                  >删除</el-button
-                >
+              <div >
+                <el-popover
+                  placement="bottom-start"
+                  trigger="hover"
+                  popper-class="custom-popover"
+                  visible-arrow
+                  width="100px"
+                  >
+                  <div class="BtnHP" >
+                    <div class="BtnHPDel">
+                      <div class="btnBh" 
+                        @click="editFile(scope.row.id, scope.row.folderid)"
+                        @mouseover="isHover = true"
+                        @mouseleave="isHover = false">
+                        <img 
+                          :src="isHover ? look2 : look1" 
+                          
+                        >
+                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">查看</span>
+                      </div>
+                      <!-- <el-button
+                        @click="editFile(scope.row.id, scope.row.folderid)"
+                        size="small"
+                        type="text"
+                        >查看</el-button
+                      > -->
+
+                      <div class="btnBh" 
+                      v-if="scope.row.isMo == '2'"
+                        @click="copyFolder(scope.row)"
+                        @mouseover="isHover2 = true"
+                        @mouseleave="isHover2 = false">
+                        <img 
+                        :src="isHover2 ? copy1 : copy2" 
+                          alt="">
+                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">复制</span>
+                      </div>
+                      <!-- <el-button
+                        @click="copyFolder(scope.row)"
+                        size="small"
+                        type="text"
+                        v-if="scope.row.isMo == '2'"
+                        >复制</el-button
+                      > -->
+                    </div>
+
+                    <div v-if="scope.row.userid == userid && scope.row.isMo == '2'"
+                      style="background-color: #e7e7e7;width: 100%;height: .5px;margin: 5px 0;">
+                    </div>
+                    
+
+                    <div class="BtnHPDel1">
+                      <div class="btnBh2" 
+                        @click="deleteFile(scope.row.id, scope.row.folderid)"
+                        v-if="scope.row.userid == userid && scope.row.isMo == '2'">
+                          <img src="../../../assets/listdel.svg" alt="">
+                          <span style="color: #DE4C41;">删除</span>
+                        </div>
+                      <!-- <el-button
+                        @click="deleteFile(scope.row.id, scope.row.folderid)"
+                        size="small"
+                        type="text"
+                        style="color: #DE4C41;"
+                        v-if="scope.row.userid == userid && scope.row.isMo == '2'"
+                        >删除</el-button
+                      > -->
+                    </div>
+                    
+                  </div>
+                  
+
+                  <el-button slot="reference" class="BtnH" style="border: none;background: none;padding: 5px;">
+                    <i class="el-icon-more"></i>
+                  </el-button>
+
+                </el-popover>
+
+                
               </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
+
+
+
       <el-pagination
         class="pageBox"
         style="margin-top: 10px;"
@@ -221,6 +407,14 @@ import wVideo from "../test/file/wVideo.vue";
 import wpdf from "../test/file/wPdf2.vue";
 import wOffice from "../test/file/wOffice.vue";
 
+// 导入SVG组件
+import look1 from '../../../assets/look1.svg';
+import look2 from '../../../assets/look2.svg';
+import copy2 from '../../../assets/copy2.svg';
+import copy1 from '../../../assets/copy1.svg';
+
+
+
 import JSZip from "jszip";
 import FileSaver from "file-saver";
 
@@ -303,6 +497,12 @@ export default {
   },
   data() {
     return {
+      look1:look1,
+      look2:look2,
+      copy2:copy2,
+      copy1:copy1,
+      isHover:false,
+      isHover2:false,
       isLoading: false,
       proVisible: false,
       stype: 2,
@@ -335,10 +535,20 @@ export default {
       tagData3: [],
       check1: [],
       check2: [],
-      check3: []
+      check3: [],
+      stype2: 1,
     };
   },
   computed: {
+    lisTnum(){
+      if (this.fileArray.length>=9 || this.fileArray.length>2) {
+        return 4;
+      }else if (this.fileArray.length<=2) {
+        return 2;
+      }else if (this.fileArray.length<=1) {
+        return 1;
+      }
+    },
     retrunType() {
       return function(item) {
         if (item.type == 1) {
@@ -375,6 +585,12 @@ export default {
     }
   },
   methods: {
+    checkStype2(type) {
+        if (this.stype2 != type) {
+            this.checkArray=[]
+            this.stype2 = type
+        }
+    },
     getTagArray(type) {
       const tagLoadings = [
         this.tagLoading1,
@@ -460,7 +676,8 @@ export default {
         folderid: row.folderid
       }));
     },
-    deleteFile(id, folderid) {
+    deleteFile(id, folderid,val) {
+      
       this.$confirm("确定删除文件夹吗?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -477,7 +694,9 @@ export default {
               });
               this.checkArray = [];
               this.checkArray2 = [];
-              this.$refs.myTable.clearSelection();
+              if (val != 1) {
+                this.$refs.myTable.clearSelection();
+              }
               this.getData();
             })
             .catch(err => {
@@ -575,18 +794,95 @@ export default {
 </script>
 
 <style scoped>
+
+.listBlockS{
+  display: grid;
+  font-family: PingFang;
+  gap: 20px;
+  -webkit-box-align: stretch;
+  align-items: stretch;
+}
+.listBlock{
+  flex: 1;
+  min-width: 250px;
+  user-select: none;
+  height: 150px;
+  cursor: pointer;
+  box-sizing: border-box;
+  border:1px solid #DFE2EA;
+  /* margin-top: 1.25rem; */
+  border-radius: 0.75rem;
+  background-color: #fff;
+  box-shadow: 0px 4px 4px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px 20px 12px;
+}
+
+.listBlock:hover{
+  border-color: #94B5FF;
+  box-shadow: 0px 1px 2px 0px rgba(19, 51, 107, 0.10), 0px 0px 1px 0px rgba(19, 51, 107, 0.15);
+}
+.listBlockTit{
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  align-items: center;
+  overflow: hidden;
+  
+}
+.listBlockTitZ{
+  min-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.owerCon{
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #667085;
+  width: 80%;
+}
+
+.owerCon img{
+  width: 16px;
+  margin-right: 5px;
+}
+.listDetail{
+  /* height: 100%; */
+  height: 45px;
+  font-size: 12.8px;
+  color: #667085;
+  padding: 12px 0;
+
+}
+.listDetail2{
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .f_box {
   width: 100%;
   /* height: 100%; */
+  height: calc(100% - 58px);
+  margin-top: 16px;
+  border-radius: 8px;
+  padding-bottom: 0 !important;
+  box-sizing: border-box;
   position: relative;
 }
 
 .f_box_top {
   display: flex;
   align-items: center;
-  padding: 10px;
+  padding: 0;
   width: 100%;
   box-sizing: border-box;
+  padding-bottom: 0;
 }
 
 .f_box_top_left {
@@ -595,7 +891,12 @@ export default {
 }
 
 .f_box_top_title {
-  font-size: 16px;
+  /* font-size: 16px; */
+  color: rgba(8, 13, 30, .9);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  /* line-height: 32px; */
   /* font-weight: bold; */
 }
 
@@ -646,7 +947,18 @@ export default {
   display: flex;
   align-items: center;
 }
-
+.f_box_top_right >>> .el-icon-plus:before {
+  font-size: 14px;
+  font-weight: 600;
+  /* vertical-align: middle;  */
+}
+.f_box_top_right >>> .el-button{
+  height: 38px !important;
+  font-size: 14px;
+}
+.f_box_top_right >>>.el-button--primary:focus,.f_box_top_right>>> .el-button--primary:hover{
+  filter: brightness(120%);
+}
 .f_box_top_right > .input {
   position: relative;
   width: 280px;
@@ -658,7 +970,7 @@ export default {
   height: 100%;
   border: 1px solid #dcdfe6;
   border-radius: 5px;
-  padding: 0 45px 0 15px;
+  padding: 0 15px 0 45px;
   box-sizing: border-box;
   font-size: 14px;
   outline: none;
@@ -672,7 +984,7 @@ export default {
   background-image: url("../../../assets/icon/sourceFile/search.png");
   background-size: 100% 100%;
   position: absolute;
-  right: 13px;
+  left: 13px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
@@ -860,7 +1172,10 @@ export default {
   /* height: calc(100% - 55px); */
   /* overflow: auto; */
   width: 100%;
-  padding: 10px;
+  padding: 10px 0;
+  padding-top: 0;
+  margin-top: 10px;
+  border-radius: 8px;
   box-sizing: border-box;
 }
 
@@ -984,11 +1299,233 @@ export default {
 .list_file_box {
   width: 100%;
 }
+.list_file_box>>> .el-table{
+  border-radius: 10px !important;
+  overflow: hidden !important;
+}
+
+.list_file_box >>>table th{
+  border:none !important;
+  background-color: #f2f3f6 !important; /* 浅灰色背景 */
+  color: #00000099 !important;
+}
+.list_file_box >>>table tr td{
+  border:none !important;
+  border-bottom: 1px solid #EBEEF5 !important;
+}
+
+.list_file_box >>>table tr {
+  border:1px #000 solid !important;
+}
+
+.list_file_box >>> .el-table__header-wrapper{
+  margin-bottom: 10px !important;
+}
+
+.list_file_box >>> .el-table__row{
+  border: 1px #ccc solid;
+}
+.list_file_box >>>table tr td:nth-child(1){
+  border-radius: 10px 0 0 10px !important;
+}
+.list_file_box >>>table tr td:nth-last-child(1){
+  border-radius: 0 10px 10px 0 !important;
+}
+
+.list_file_box >>>table tr th:nth-child(1){
+  border-radius: 10px 0 0 10px;
+}
+
+.list_file_box >>>table tr th:nth-last-child(2){
+  border-radius: 0 10px 10px 0 !important;
+}
+.list_file_box >>>.el-table::before{
+  background-color: #fff;
+}
+.list_file_box >>>.el-table--border::after{
+  background-color: #fff;
+}
+.list_file_box >>> .el-table--border{
+  border: none;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+
+.BtnH >>> .el-button{
+  padding: 5px !important;
+  width: 30px !important;
+  color: #4C5567;
+}
+.BtnH >>> .el-button:focus,.BtnH >>> .el-button:hover{
+  background: #E8EBF0 !important;
+  color: #487FFF !important;
+}
+.BtnH >>> .el-button--small, .el-button--small.is-round{
+  border: none;
+  padding: 0;
+}
+
+.BtnHP{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.BtnHP >>> .el-button:focus, .BtnHP >>> .el-button:hover{
+  background-color: #487FFF;
+}
+
+.BtnHP >>>.el-popper .popper__arrow, .el-popper .popper__arrow::after{
+  display: none;
+}
+.BtnHP >>> .el-button--text{
+  color: #667095;
+}
+.BtnHP img{
+  width: 16px;
+}
+
+/* 删除 */
+.BtnHPDel1{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: #DE4C41 !important;
+}
+.BtnHPDel1 >>> .el-button:focus, .BtnHPDel1 >>> .el-button:hover{
+  background: #FBEAE8 ;
+  color: #DE4C41 !important;
+}
+/* .BtnHPDel1{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+} */
 
+.BtnHPDel{
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.BtnHPDel >>> .el-button+.el-button{
+  padding: 0;
+}
+.BtnHPDel >>> .el-button:focus,.BtnHPDel >>> .el-button:hover{
+  background: #E8EBF0 !important;
+}
+/* .BtnHPDel >>> .el-button:hover .lookHp{
+
+} */
+.lookHp2{
+  color: #6c6c6c;
+}
+.lookHp2{
+  color: #487FFF;
+}
+
+
+.left {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}
+.left>span {
+    height: 25px;
+    width: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.left>span+span {
+    margin-left: 10px;
+}
+.left>span.active {
+    background: #E0EAFB;
+}
+.left>span::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background-size: 100% 100%;
+}
+.left>span.list::before {
+    background-image: url("../../../assets/test_list.png");
+}
+.left>span.table::before {
+    background-image: url("../../../assets/test_table.png");
+}
+
+.left>span.table.active::before {
+    background-image: url("../../../assets/test_table_active.png");
+}
+.left>span.list.active::before {
+    background-image: url("../../../assets/test_list_active.png");
+}
 .pageBox{
   display: flex;
 }
 .pageBox >>> .el-pagination__total{
   margin-right: auto;
 }
+.btnBh{
+  display: flex;
+  /* align-items: center; */
+  justify-content: center;
+  cursor: pointer;
+  /* height: 28px; */
+  padding: 4px 10px;
+
+  border-radius: 5px;
+}
+.btnBh:hover{
+  background: #F0F4FF;
+}
+.btnBh img{
+  margin-right: 5px;
+  width: 17px;
+}
+.btnBh2{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 5px;
+}
+.btnBh2 img{
+  width: 14px;
+  margin-right: 5px;
+}
+.btnBh2:hover{
+  background: #FBEAE8;
+}
+.listTag{
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.f_box_file_list >>> .el-table-column--selection .cell{
+    display: flex !important;
+    align-items: center !important;
+}
 </style>
+
+<style>
+.custom-popover {
+  min-width: 18px !important;
+  width: auto !important;
+  padding: 8px;
+}
+.custom-popover2 {
+  min-width: 18px !important;
+  width: auto !important;
+  padding: 8px;
+  top: 414px !important;
+  text-align: center;
+}
+</style>

src/components/pages/knowledge/folderDetail.vue

@@ -1,87 +1,157 @@
 <template>
   <div class="f_box">
+    
+    <div class="f_box_top2">
+      <folderFileBoxVue
+        :pid="pid"
+        :userid="userid"
+        :typeArray="typeArray"
+        :folderid="folderid"
+        :moFolderid="moFolderid"
+        :data="data"
+      ></folderFileBoxVue>
+    </div>
+
     <div class="f_box_top" v-loading="isLoading">
-      <div class="title">
-        <textarea
-          rows="1"
-          style="width: 300px;"
-          class="binfo_input binfo_textarea"
-          ref="binfo_textarea"
-          cols
-          v-model="data.name"
-          placeholder="输入文件夹名字"
-          v-if="canEdit"
-        ></textarea>
-        <div class="t_title" v-else>{{ data.name }}</div>
+       
+        <div class="t_title">
+          <div class="t_title">
+            <img style="width: 20px;margin-right: 5px;" src="../../../assets/listfolder2.svg" alt="">
+            <el-tooltip class="item" effect="dark" :content="data.name" placement="top">
+              <p>{{ data.name }}</p>    
+            </el-tooltip>
+
+          </div>
+          <div style="margin-left: 6px;cursor: pointer;" @click="canEdit = true;" v-if="userid == data.userid && data.isMo == '2'">
+            <img style="width: 11px;" src="../../../assets/xiugai.svg" alt="">
+          </div>
+        </div>
+        
         <div class="t_btn">
-          <!-- <div class="btn">复制文件夹</div> -->
-          <el-button
-            type="primary"
-            size="small"
-            v-if="data.isMo == '2'"
-            @click="copyFolder"
-            >复制文件夹</el-button
-          >
-          <el-button
-            v-if="userid == data.userid && data.isMo == '2'"
-            type="danger"
-            size="small"
-            @click="deleteFile(pid.split('/')[1])"
-            >删除文件夹</el-button
-          >
-          <!-- <div
-            class="btn"
-            @click="deleteFile(pid.split('/')[1])"
-            v-if="userid == data.userid && data.isMo == '2'"
-          >
-            删除文件夹
-          </div> -->
+           <div v-if="data.isMo == '2'" @click="copyFolder">
+            <img style="width: 16px;margin-right: 8px;" src="../../../assets/copyFlieG.svg" alt="">
+            复制
+           </div>
+           <div v-if="userid == data.userid && data.isMo == '2'"  @click="deleteFile(pid.split('/')[1])"">
+            <img style="width: 16px;margin-right: 8px;" src="../../../assets/delFlieG.svg" alt="">
+            删除
+           </div>
+        </div>
+        <div class="detail">
+          <div class="detail_box">
+            {{ !data.detail ? '暂无描述' : data.detail }}
+          </div>
         </div>
-      </div>
-      <div class="detail">
-        <textarea
-          v-autoHeight="68"
-          rows="2"
-          class="binfo_input binfo_textarea"
-          ref="binfo_textarea"
-          cols
-          v-model="data.detail"
-          placeholder="输入文件夹描述"
-          v-if="canEdit"
-        ></textarea>
-        <div
-          class="detail_box"
-          v-html="data.detail ? data.detail : '暂无描述'"
-          v-else
+
+        <div 
+        style="background-color: #E8EBF0;width: 100%;height: 1px;margin: 16px 0;"
+        v-if="check1.length || check2.length || check3.length"
         ></div>
-        <div class="editbox" v-if="userid == data.userid && data.isMo == '2'">
-          <div class="edit_btn" @click="editConfirm">
-            {{ canEdit ? "确定" : "编辑" }}
+
+        <div 
+        style="font-size: 12px;font-family: PingFang;color: #111824;height: 24px;line-height: 24px;"
+        v-if="check1.length || check2.length || check3.length"
+        >标签</div>
+        
+        <div class="tag_box" v-if="data.userid == userid && data.isMo == '2'">
+          <div class="tag" v-loading="tagLoading1">
+
+              <div class="tags" v-if="check1.length">
+                <div  v-for="(item,index) in tagData1" :key="index+'a'">
+                    <el-tag v-if="check1.includes(item.id)">{{ TagList(item) }}</el-tag>
+                </div>
+              </div>
+              <div class="tags" v-if="check2.length">
+                <div  v-for="(item,index) in tagData2" :key="index+'b'">
+                      <el-tag v-if="check2.includes(item.id)" type="info">{{ TagList2(item) }}</el-tag>
+                </div>
+              </div>
+
+              <div class="tags" v-if="check3.length">
+                <div v-for="(item,index) in tagData3" :key="index+'c'">
+                    <el-tag v-if="check3.includes(item.name)" type="warning">{{ TagList3(item) }}</el-tag>
+                </div>
+              </div>
+
           </div>
+        <div style="background-color: #E8EBF0;width: 100%;height: 1px;margin: 16px 0;"></div>
+            <div style="font-size: 12px;font-family: PingFang;color: #111824;height: 24px;line-height: 24px;">权限</div>
+
+            <div class="flieTag">
+              <div v-if="data.juri == 1">
+                <img src="../../../assets/siyou.svg" alt="">
+                <span>私有</span>
+              </div>
+              <div v-if="data.juri == 2">
+                <img src="../../../assets/siyou3.svg" alt="">
+                <span>组织</span>
+              </div>
+              <div v-if="data.juri == 3">
+                <img src="../../../assets/siyou2.svg" alt="">
+                <span>全部</span>
+              </div>
+            </div>
         </div>
-      </div>
-      <div class="tag_box" v-if="data.userid == userid && data.isMo == '2'">
-        <div class="tag">
-          <div class="tag_title">标签：</div>
+     
+        <div class="tag_box" v-else-if="data.isMo == '2'">
           <div class="tag_check">
-            <selectTag
-              v-loading="tagLoading1"
-              v-model="check1"
-              :options="tagData1"
-              :placeholder="'前选择学科标签'"
-              style="width: calc(100% / 2 - 10px / 2); margin-right: 10px;"
-              @change="updateFolder()"
-            />
-            <selectTag
-              v-loading="tagLoading2"
-              v-model="check2"
-              :options="tagData2"
-              :placeholder="'前选择年级标签'"
-              style="width: calc(100% / 2 - 10px / 2); margin-right: 10px;"
-              @change="updateFolder()"
-              clearable
-            />
-            <selectTag2
+            <div class="tag_check_box" v-if="this.check1.length">
+              <span>学科：</span>
+              <span>{{ getTagName(1) }}</span>
+            </div>
+            <div class="tag_check_box" v-if="this.check2.length">
+              <span>年级：</span>
+              <span>{{ getTagName(2) }}</span>
+            </div>
+            <div class="tag_check_box" v-if="this.check3.length">
+              <span>自定义：</span>
+              <span>{{ getTagName(3) }}</span>
+            </div>
+          </div>
+        </div>
+    </div>
+
+      <el-dialog
+        :visible.sync="canEdit"
+        width="30%"
+        title=""
+        class="canEditCss"
+        :before-close="handleClose">
+
+          <div class="canEditTit" slot="title">
+            <img src="../../../assets/listfolder2.svg" alt="">
+            <span>编辑</span>
+          </div>
+
+          <el-input v-model="fileDetail.name" placeholder="输入文件夹名字"></el-input>
+
+          <el-input
+            type="textarea"
+            style="margin: 10px 0;"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            placeholder="输入文件夹描述"
+            v-model="fileDetail.detail">
+          </el-input>
+
+          <selectTag
+            v-loading="tagLoading1"
+            v-model="fileDetailCheck1"
+            :options="tagData1"
+            :placeholder="'前选择学科标签'"
+            style="width: 70%"
+          />
+          <!-- @change="updateFolder()" -->
+            
+          <selectTag
+            v-loading="tagLoading2"
+            v-model="fileDetailCheck2"
+            :options="tagData2"
+            :placeholder="'前选择年级标签'"
+            style="width: 70%; margin: 10px 0;"
+            clearable
+          />
+          <!-- @change="updateFolder()" -->
+          <!-- <selectTag2
               v-loading="tagLoading3"
               v-model="check3"
               :options="tagData3"
@@ -92,74 +162,38 @@
               filterable
               clearable
               @deleteTag="deleteTag"
-            />
-            <!-- <el-select
-              v-loading="tagLoading3"
-              v-model="check3"
-              placeholder="自定义标签"
-              clearable
-              filterable
-              multiple
-              collapse-tags
-              allow-create
-              style="width: 100%; margin-top: 10px;"
-              @change="handleTagChange"
-            >
-              <el-option
-                v-for="(item, index) in tagData3"
-                :key="index"
-                :label="item.name"
-                :value="item.name"
-              >
-                <div class="selectBox">
-                  <span>{{ item.name }}</span>
-                  <div class="controlsBox">
-                    <span
-                      class="delSelect"
-                      @click.stop="deleteTag(item.id, item.name)"
-                    ></span>
-                  </div>
-                </div>
-              </el-option>
-            </el-select> -->
-          </div>
-        </div>
-        <div class="tag">
-          <div class="tag_title">权限管理：</div>
-          <div class="tag_check">
-            <el-radio-group v-model="data.juri" @change="updateFolder()">
-              <el-radio label="1">私有</el-radio>
-              <el-radio label="2">组织内</el-radio>
-              <el-radio label="3">全部</el-radio>
-            </el-radio-group>
-          </div>
-        </div>
-      </div>
-      <div class="tag_box" v-else-if="data.isMo == '2'">
-        <div class="tag_check">
-          <div class="tag_check_box" v-if="this.check1.length">
-            <span>学科：</span>
-            <span>{{ getTagName(1) }}</span>
+            /> -->
+          <selectTag2
+            v-loading="tagLoading3"
+            v-model="fileDetailCheck3"
+            :options="tagData3"
+            :placeholder="'自定义标签'"
+            style="width: 70%; margin-top: 10px;"
+            allow-create
+            filterable
+            clearable
+            @change="handleTagChange"
+            @deleteTag="deleteTag"
+          />
+          <!-- @change="handleTagChange" -->
+          
+          <div class="tag" style="margin-top: 10px;display: flex;align-items: center;">
+            <div class="tag_title">权限管理：</div>
+              <div class="tag_check">
+                <el-radio-group v-model="fileDetail.juri" >
+                  <el-radio label="1">私有</el-radio>
+                  <el-radio label="2">组织内</el-radio>
+                  <el-radio label="3">全部</el-radio>
+                </el-radio-group>
+              </div>
           </div>
-          <div class="tag_check_box" v-if="this.check2.length">
-            <span>年级：</span>
-            <span>{{ getTagName(2) }}</span>
-          </div>
-          <div class="tag_check_box" v-if="this.check3.length">
-            <span>自定义：</span>
-            <span>{{ getTagName(3) }}</span>
-          </div>
-        </div>
-      </div>
-      <folderFileBoxVue
-        :pid="pid"
-        :userid="userid"
-        :typeArray="typeArray"
-        :folderid="folderid"
-        :moFolderid="moFolderid"
-        :data="data"
-      ></folderFileBoxVue>
-    </div>
+          <!-- disabled @change="updateFolder()" -->
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="canEdit = false">取 消</el-button>
+          <el-button type="primary" @click="modifyDetail">确 定</el-button>
+        </span>
+      </el-dialog>
   </div>
 </template>
 
@@ -194,6 +228,11 @@ export default {
   data() {
     return {
       data: {},
+      fileDetail:{},
+      fileDetailCheck1:[],
+      fileDetailCheck2:[],
+      fileDetailCheck3:[],
+
       isLoading: false,
       canEdit: false,
       tagLoading1: false,
@@ -217,6 +256,39 @@ export default {
     }
   },
   computed: {
+    TagList(){
+      return function(val) {
+       if (this.check1.includes(val.id)) {
+        for (let index = 0; index < this.check1.length; index++) {
+          if (this.check1[index] == val.id) {
+            return val.name
+          }
+        }
+       }
+      };
+    },
+    TagList2(){
+      return function(val) {
+       if (this.check2.includes(val.id)) {
+        for (let index = 0; index < this.check2.length; index++) {
+          if (this.check2[index] == val.id) {
+            return val.name
+          }
+        }
+       }
+      };
+    },
+    TagList3(){
+      return function(val) {
+       if (this.check3.includes(val.name)) {
+        for (let index = 0; index < this.check3.length; index++) {
+          if (this.check3[index] == val.name) {
+            return val.name
+          }
+        }
+       }
+      };
+    },
     getTagName() {
       return function(type) {
         const tagDataMap = {
@@ -256,6 +328,45 @@ export default {
     this.getData();
   },
   methods: {
+    modifyDetail(){
+      if (!this.fileDetail.name.trim()) {
+        this.$message.error("文件夹名字不能为空");
+        return;
+      }
+
+      let type = this.pid.split("/");
+      let params = {
+        id: type[1],
+        n: this.fileDetail.name,
+        d: this.fileDetail.detail,
+        st: this.fileDetailCheck1.join(","),
+        ct: this.fileDetailCheck2.join(","),
+        t: this.fileDetailCheck3.join(","),
+        j: this.fileDetail.juri,
+        folderid: this.folderid
+      };
+      // t: this.fileDetailCheck3.join(","),
+// return console.log('params2',params);
+
+      this.ajax
+        .post(this.$store.state.fileApi + "updateFolder", [params])
+        .then(res => {
+          this.$message.success("修改成功");
+          this.canEdit=false
+          this.getData();
+        })
+        .catch(err => {
+          console.error(err);
+        });
+
+
+
+      // this.updateFolder()
+      // this.handleTagChange()
+    },
+    handleClose(done) {
+      done();
+    },
     getData() {
       this.isLoading = true;
       let type = this.pid.split("/");
@@ -267,6 +378,17 @@ export default {
         .then(res => {
           this.isLoading = false;
           this.data = res.data[0][0];
+
+          this.fileDetail = JSON.parse(JSON.stringify(res.data[0][0]));
+
+          this.fileDetailCheck1 = res.data[0][0].sub_tag
+            ? res.data[0][0].sub_tag.split(",")
+            : [];
+          this.fileDetailCheck2 = res.data[0][0].class_tag
+            ? res.data[0][0].class_tag.split(",")
+            : [];
+          this.fileDetailCheck3 = res.data[0][0].tag ? res.data[0][0].tag.split(",") : [];
+
           this.check1 = res.data[0][0].sub_tag
             ? res.data[0][0].sub_tag.split(",")
             : [];
@@ -383,6 +505,7 @@ export default {
         this.canEdit = true;
         return;
       }
+
       let type = this.pid.split("/");
       let params = {
         id: type[1],
@@ -394,6 +517,8 @@ export default {
         j: this.data.juri,
         folderid: this.folderid
       };
+      // return console.log('params',params);
+      
       this.ajax
         .post(this.$store.state.fileApi + "updateFolder", [params])
         .then(res => {
@@ -405,6 +530,8 @@ export default {
         });
     },
     handleTagChange(value) {
+      // console.log('value',value);
+      
       const tagArray = this.tagData3;
       const selectedTags = value.flatMap(tag =>
         tag.split(/[,，]/).map(t => t.trim())
@@ -419,11 +546,11 @@ export default {
         selectedTag => !tagArray.some(tag => tag.name === selectedTag)
       );
 
-      console.log("Selected tags:", uniqueTags);
-      console.log("Missing tags:", missingTags);
+      // console.log("Selected tags:", uniqueTags);
+      // console.log("Missing tags:", missingTags);
       this.check3 = uniqueTags;
       missingTags.forEach(tag => this.addTag(tag));
-      this.updateFolder();
+      // this.updateFolder();
     },
     addTag(name) {
       let params = {
@@ -472,151 +599,155 @@ export default {
 <style scoped>
 .f_box {
   width: 100%;
-  /* height: 100%; */
+  height: 100%;
   position: relative;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 8px;
 }
 
 .f_box_top {
   padding: 10px;
-  width: 100%;
+  width: 272px;
+  padding: 24px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  height: 100%;
+  border-radius: 8px;
+  background-color: #fff;
   box-sizing: border-box;
 }
-
-.f_box_top .btn {
+.f_box_top2{
+  height: calc(100% - 48px);
+  flex: 1;
+  max-width: calc(100% - 320px);
   display: flex;
-  cursor: pointer;
-  align-items: center;
-  height: 30px;
-  padding: 0 8px;
-  background: rgb(0, 97, 255);
-  color: #fff;
+  flex-direction: column !important;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 24px;
+}
+.t_title{
+  display: flex;
+  font-weight: 600;
+  font-size: 16px;
+  width: 180px;
+  color: #111842;
+}
+.t_title p{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.t_btn{
+  display: flex;
+  gap: 10px;
+  color: #485264;
+  padding-top: 8px;
+  /* margin: 10px 0; */
+}
+.t_btn div{
+  padding: 6px 12px;
+  background: #f4f4f7;
+  border-radius: 6px;
   box-sizing: border-box;
-  border-radius: 4px;
-  font-size: 14px;
+  border: 1 #e8ebf0 solid;
+  font-size: 12.8px;
+  cursor: pointer;
+  display: flex;
   align-items: center;
+  justify-content: center;
 }
-
-.f_box_top .btn + .btn {
-  margin-left: 10px;
+.detail_box{
+  font-size: 12.8px;
+  color: #667085;
+  padding-top: 12px;
+  font-family: PingFang;
+  -webkit-line-clamp: 5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.f_box_top > .title {
-  width: 100%;
+.tags{
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
-
-.f_box_top > .title > .t_title {
-  font-size: 22px;
-  font-weight: bold;
+.tags div {
+  margin-bottom: 10px;
+}
+.tags >>> .el-tag{
+    font-size: 12px;
+    margin-right: 10px;
+    height: 20px;
+    line-height: 20px;
 }
 
-.f_box_top > .title > .t_btn {
-  margin-left: auto;
+
+.flieTag{
+  font-size: 12px;
+  font-family: PingFang SC;
+  /* margin-top: 8px; */
+  color: #667085;
+}
+.flieTag div{
   display: flex;
   align-items: center;
 }
-
-.binfo_input {
-  width: 100%;
-  margin: 0;
-  padding: 12px 14px;
-  display: block;
-  min-width: 0;
-  outline: none;
-  box-sizing: border-box;
-  background: none;
-  border: none;
-  border-radius: 4px;
-  background: #fff;
-  font-size: 16px;
-  resize: none;
-  font-family: "Microsoft YaHei";
-  min-height: 48px;
-  /* border: 1px solid #3682fc00; */
-  border: 1.5px solid #cad1dc;
+.flieTag img{
+  width: 13px;
+  margin-right: 5px;
 }
 
-.binfo_textarea {
-  border: 1.5px solid #cad1dc;
-  font-size: 16px;
-  resize: none;
-  /* background: #f6f6f6; */
-  font-family: "Microsoft YaHei";
-}
 
-.binfo_input:focus-visible {
-  border: 1.5px solid #3681fc !important;
-}
 
-.f_box_top > .detail {
-  width: 100%;
-  margin-top: 10px;
-  color: #6d6d6d;
-}
 
-.f_box_top > .detail > .detail_box {
-  width: 100%;
-  white-space: break-spaces;
-  word-break: break-all;
-}
 
-.f_box_top > .detail > .editbox {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
 
-.f_box_top > .detail > .editbox > .edit_btn {
-  color: #3681fc;
-  cursor: pointer;
-  margin-top: 5px;
-}
 
-.tag_box {
-  margin: 10px 0 0 0;
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-}
-.tag_box > .tag {
-  width: calc(100% / 2 - 20px / 2);
-  display: flex;
-  align-items: flex-start;
-  line-height: 40px;
-}
 
-.tag_box > .tag + .tag {
-  margin-left: 20px;
-}
+
+
+
+
+
+
+
+
+
 
 .tag_box > .tag > .tag_title {
-  min-width: fit-content;
+  /* margin-top: 10px; */
+  display: flex;
+  /* flex-direction: column; */
+  flex-wrap: wrap;
 }
-.tag_box > .tag > .tag_check {
+.tag_title div{
   display: flex;
+  width: 100%;
   flex-wrap: wrap;
 }
 
-.tag_box > .tag > .tag_check >>> .el-radio-button__inner,
-.el-radio-group,
-.tag_box > .tag > .tag_check >>> .el-radio__input,
-.tag_box > .tag > .tag_check >>> .el-radio__label,
-.tag_box > .tag > .tag_check >>> .el-radio {
+
+
+.tag_box > .tag > .tag_check {
   display: flex;
-  align-items: center;
-  height: 40px;
+
 }
 
-.selectBox {
+
+/* .selectBox {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
+} */
 
-.controlsBox {
+/* .controlsBox {
   display: flex;
   align-items: center;
   width: auto;
@@ -627,20 +758,18 @@ export default {
 .delSelect {
   width: 16px;
   height: 16px;
-  /* display: none; */
   align-items: center;
   justify-content: center;
   background: url("../../../assets/icon/classroomObservation/del.svg") no-repeat;
   background-size: 100% 100%;
   box-sizing: border-box;
-  /* transform: translateY(7px); */
-}
+} */
 
-.tag_check_box {
+/* .tag_check_box {
   width: 100%;
   display: flex;
   margin: 0 0 10px;
-  flex-wrap: nowrap;
+  flex-shrink: 0;
 }
 .tag_check_box > span:nth-child(1) {
   min-width: 65px;
@@ -648,5 +777,18 @@ export default {
 }
 .tag_check_box > span:nth-child(2) {
   word-break: break-all;
+} */
+.canEditCss >>> .el-dialog{
+  border-radius: 8px;
+  width: 500px !important;
+}
+.canEditTit{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.canEditTit img{
+  width: 25px;
+  margin-right: 10px;
 }
 </style>

src/components/pages/knowledge/folderFileBox.vue

@@ -5,11 +5,21 @@
         <div class="f_box_top_title">文件</div>
       </div>
       <div class="f_box_top_right">
-        <span v-if="checkArray.length" style="margin-right: 10px;color: #b0b0b0;font-size: 14px;">已选文件{{checkArray.length}}个</span>
+
+        <div class="input">
+          <input
+            type="text"
+            v-model="fileName"
+            placeholder="请输入你需要搜索的文件名字"
+            @input="debouncedSearch"
+          />
+          <div class="serch"></div>
+        </div>
+
         <el-button type="primary" size="small" @click="serchFile"
           >刷新</el-button
         >
-        <el-button type="primary" size="small" @click="addImg($event)"
+        <el-button type="primary" icon="el-icon-plus" size="small" @click="addImg($event)"
           >上传文件
           <input
             type="file"
@@ -25,12 +35,15 @@
           v-if="userid == data.userid && data.isMo == '2'"
           >关联文件</el-button
         >
-        <el-button type="primary" size="small" @click="batchRemove"
+
+        <el-button type="primary" v-if="checkArray.length" size="small" @click="batchRemove"
           >移除</el-button
         >
-        <el-button type="danger" size="small" @click="batchDelete"
+        <el-button type="danger" v-if="checkArray.length" size="small" @click="batchDelete"
           >删除</el-button
         >
+        <span v-if="checkArray.length" style="margin-left: 10px;color: #b0b0b0;font-size: 14px;">已选文件{{checkArray.length}}个</span>
+
         <!-- <div class="btn" @click="serchFile">刷新</div>
         <div class="btn" @click="addImg($event)">
           上传文件
@@ -47,37 +60,38 @@
         <div class="btn delBtn" @click="batchDelete">删除</div> -->
       </div>
     </div>
-    <div class="f_box_top">
+
+    <!-- <div class="f_box_top">
       <div class="f_box_top_left"></div>
       <div class="f_box_top_right">
-        <div class="input">
-          <input
-            type="text"
-            v-model="fileName"
-            placeholder="请输入你需要搜索的文件名字"
-            @input="debouncedSearch"
-          />
-          <div class="serch"></div>
-          <!-- @click="serchFile" -->
-        </div>
+        
       </div>
-    </div>
-    <div class="none_box" v-if="fileArray.length == 0">暂无上传文件</div>
+    </div> -->
+    <!-- <div class="none_box" v-if="fileArray.length == 0">暂无上传文件</div> -->
+    <!-- v-else-if="stype == '2' && fileArray.length" -->
+
     <div
       class="f_box_file_list"
-      v-else-if="stype == '2' && fileArray.length"
       v-loading.body="isLoading"
     >
       <div class="list_file_box">
         <el-table
           :data="fileArray"
           border
-          stripe
           style="width: 100%"
           @selection-change="handleSelectionChange"
           ref="myTable"
           :row-key="row => row.id"
         >
+        <template #empty>
+          <div class="customC">
+            <div style="height: 50px;line-height: 50px;width: 47.4px;display: flex;justify-content: center;">
+              <img style="width: 100%;" src="../../../assets/flieKong.svg" alt="">
+            </div>
+            <div style="height: 50px;line-height: 40px;">数据集空空如也</div>
+           
+          </div>
+        </template>
           <el-table-column
             type="selection"
             width="50px"
@@ -90,17 +104,18 @@
             min-width="15"
           ></el-table-column>
           <el-table-column
-            prop="username"
-            label="拥有者"
+            prop="folderName"
+            label="所属文件夹"
             show-overflow-tooltip
             min-width="20"
           ></el-table-column>
           <el-table-column
-            prop="folderName"
-            label="所属文件夹"
+            prop="username"
+            label="拥有者"
             show-overflow-tooltip
-            min-width="20"
+            width="220"
           ></el-table-column>
+          
           <el-table-column label="处理状态" width="80px">
             <template slot-scope="scope">
               {{ getState(scope.row.ingestionStatus) }}
@@ -127,39 +142,99 @@
             show-overflow-tooltip
             min-width="20"
           ></el-table-column>
-          <el-table-column label="操作" width="300px">
+          <el-table-column label="操作" width="100px">
             <template slot-scope="scope">
-              <div>
-                             <el-button
-                  type="primary"
-                  size="small"
-                  @click="extractFile(scope.row)"
-                  v-if="userid == data.userid "
-                  :disabled="scope.row.ingestionStatus == 'failed'"
-                  >提取</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="small"
-                  @click="checkFile(scope.row)"
-                  :disabled="scope.row.ingestionStatus == 'failed'"
-                  >查看</el-button
-                >
-                <el-button
-                  type="primary"
-                  size="small"
-                  v-if="userid == data.userid && data.isMo == '2'"
-                  @click="removeFile(scope.row.id, scope.row.documentid)"
-                  >移除</el-button
-                >
-                <el-button
-                  type="danger"
-                  size="small"
-                  v-if="userid == scope.row.userid"
-                  @click="deleteFile(scope.row.id, scope.row.documentid)"
-                  >删除</el-button
-                >
-              </div>
+              <el-popover
+                  placement="bottom-end"
+                  trigger="hover"
+                  visible-arrow
+                  popper-class="custom-popover"
+                  width="100px"
+                  >
+                  <div  class="BtnHP">
+                    <div class="BtnHPDel1">
+                      <!-- <el-button
+                        type="primary"
+                        size="small"
+                        @click="extractFile(scope.row)"
+                        v-if="userid == data.userid "
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        >提取</el-button
+                      > -->
+                      <div class="btnBh" 
+                        @click="extractFile(scope.row)"
+                        @mouseover="isHover = true"
+                        v-if="userid == data.userid "
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        @mouseleave="isHover = false">
+                        <img 
+                        style="width: 14px;"
+                        :src="isHover ? tqList2 : tqList" 
+                          alt="">
+                        <span :class="isHover ? 'lookHp2' : 'lookHp1'">提取</span>
+                      </div>
+                      <!-- <el-button
+                        type="primary"
+                        size="small"
+                        @click="checkFile(scope.row)"
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        >查看</el-button
+                      > -->
+                      <div class="btnBh" 
+                      @click="checkFile(scope.row)"
+                        @mouseover="isHover2 = true"
+                        :disabled="scope.row.ingestionStatus == 'failed'"
+                        @mouseleave="isHover2 = false">
+                        <img 
+                        :src="isHover2 ? look2 : look1" 
+                          alt="">
+                        <span :class="isHover2 ? 'lookHp2' : 'lookHp1'">查看</span>
+                      </div>
+                    </div>
+
+
+                    <div class="btnBh" 
+                        @click="removeFile(scope.row.id, scope.row.documentid)"
+                        @mouseover="isHover3 = true"
+                        v-if="userid == data.userid && data.isMo == '2'"
+                        @mouseleave="isHover3 = false">
+                        <img 
+                        style="width: 14px;"
+                        :src="isHover3 ? yichu2 : yichu" 
+                          alt="">
+                        <span :class="isHover3 ? 'lookHp2' : 'lookHp1'">移除</span>
+                      </div>
+
+                    <!-- <el-button
+                      type="primary"
+                      size="small"
+                      v-if="userid == data.userid && data.isMo == '2'"
+                      @click="removeFile(scope.row.id, scope.row.documentid)"
+                      >移除</el-button
+                    > -->
+
+
+                    <!-- <el-button
+                      type="danger"
+                      size="small"
+                      v-if="userid == scope.row.userid"
+                      @click="deleteFile(scope.row.id, scope.row.documentid)"
+                      >删除</el-button
+                    > -->
+                    <div style="background-color: #e7e7e7;width: 100%;height: .5px;margin: 5px 0;"></div>
+                    <div class="BtnHPDel">
+                      <div class="btnBh2" 
+                      @click="deleteFile(scope.row.id, scope.row.documentid)"
+                      v-if="scope.row.userid == userid">
+                        <img src="../../../assets/listdel.svg" alt="">
+                        <span style="color: #DE4C41;">删除</span>
+                      </div>
+                    </div>
+                  </div>
+                  <el-button slot="reference" class="BtnH" style="border: none;padding: 5px;">
+                    <i class="el-icon-more"></i>
+                  </el-button>
+              </el-popover>
             </template>
           </el-table-column>
         </el-table>
@@ -200,6 +275,14 @@ import videoImg from "../../../assets/icon/sourceFile/video.png";
 import otherImg from "../../../assets/icon/sourceFile/other.png";
 import checkImg from "../../../assets/icon/sourceFile/check.png";
 import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
+// 导入SVG组件
+import look1 from '../../../assets/look1.svg';
+import look2 from '../../../assets/look2.svg';
+import tqList2 from '../../../assets/tqList2.svg';
+import tqList from '../../../assets/tqList.svg';
+import yichu from '../../../assets/yichu.svg';
+import yichu2 from '../../../assets/yichu2.svg';
+
 
 import wVideo from "../test/file/wVideo.vue";
 import wpdf from "../test/file/wPdf2.vue";
@@ -252,6 +335,17 @@ export default {
   },
   data() {
     return {
+      look1:look1,
+      look2:look2,
+      tqList2:tqList2,
+      tqList:tqList,
+      yichu:yichu,
+      yichu2:yichu2,
+      isHover:false,
+      isHover2:false,
+      isHover3:false,
+
+      
       isLoading: false,
       proVisible: false,
       stype: 2,
@@ -612,12 +706,15 @@ export default {
   /* height: 100%; */
   position: relative;
   min-height: 400px;
+  display: flex;
+  flex-direction: column;
 }
 
 .f_box_top {
   display: flex;
   align-items: center;
-  padding: 10px 0;
+  padding: 10px 0 12px;
+  padding-top: 0px;
   width: 100%;
   box-sizing: border-box;
 }
@@ -629,6 +726,7 @@ export default {
 
 .f_box_top_title {
   font-size: 16px;
+  color: rgba(8, 13, 30, .9);
   /* font-weight: bold; */
 }
 
@@ -684,14 +782,29 @@ export default {
   position: relative;
   width: 280px;
   height: 40px;
+  margin-right: 10px;
+}
+.f_box_top_right >>> .el-button{
+  height: 38px !important;
+  font-size: 14px;
+  background-color: #3370FF;
+}
+.f_box_top_right >>>.el-button--primary:focus,.f_box_top_right>>> .el-button--primary:hover{
+  filter: brightness(120%);
 }
 
+
+.f_box_top_right >>> .el-icon-plus:before {
+  font-size: 14px;
+  font-weight: 600;
+  /* vertical-align: middle;  */
+}
 .f_box_top_right > .input > input {
   width: 100%;
   height: 100%;
   border: 1px solid #dcdfe6;
   border-radius: 5px;
-  padding: 0 45px 0 15px;
+  padding: 0 15px 0 45px;
   box-sizing: border-box;
   font-size: 14px;
   outline: none;
@@ -705,7 +818,7 @@ export default {
   background-image: url("../../../assets/icon/sourceFile/search.png");
   background-size: 100% 100%;
   position: absolute;
-  right: 13px;
+  left: 13px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
@@ -894,6 +1007,7 @@ export default {
   /* overflow: auto; */
   width: 100%;
   padding: 10px 0;
+  padding-top: 0;
   box-sizing: border-box;
 }
 
@@ -1017,7 +1131,135 @@ export default {
 .list_file_box {
   width: 100%;
 }
+.list_file_box >>>table th{
+  border:none !important;
+  background-color: #F0F2F5 !important; /* 浅灰色背景 */
+  color: #00000099 !important;
+}
+.list_file_box >>>table tr td{
+  border:none !important;
+  border-bottom: 1px solid #EBEEF5 !important;
+}
+
+.list_file_box >>>table tr {
+  border:1px #000 solid !important;
+}
+
+.list_file_box >>> .el-table__header-wrapper{
+  margin-bottom: 10px !important;
+}
+
+.list_file_box >>> .el-table__row{
+  border: 1px #ccc solid;
+}
+.list_file_box >>>table tr td:nth-child(1){
+  border-radius: 10px 0 0 10px !important;
+}
+.list_file_box >>>table tr td:nth-last-child(1){
+  border-radius: 0 10px 10px 0 !important;
+}
+
+.list_file_box >>>table tr th:nth-child(1){
+  border-radius: 10px 0 0 10px;
+}
+
+.list_file_box >>>table tr th:nth-last-child(2){
+  border-radius: 0 10px 10px 0 !important;
+}
+.list_file_box >>>.el-table::before{
+  background-color: #fff;
+}
+.list_file_box >>>.el-table--border::after{
+  background-color: #fff;
+}
+.list_file_box >>> .el-table--border{
+  border: none;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+
+.BtnH >>> .el-button{
+  padding: 5px !important;
+  width: 30px !important;
+  color: #4C5567;
+}
+.BtnH >>> .el-button:focus,.BtnH >>> .el-button:hover{
+  background: #E8EBF0 !important;
+  color: #487FFF !important;
+}
+.BtnH >>> .el-button--small, .el-button--small.is-round{
+  border: none;
+  padding: 0;
+}
+
+.BtnHP{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHP >>>.el-popper .popper__arrow, .el-popper .popper__arrow::after{
+  display: none;
+}
+.BtnHP >>> .el-button--text{
+  color: #667095;
+}
+.BtnHP img{
+  width: 16px;
+}
+
+
+
+
+.BtnHPDel{
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.BtnHPDel >>> .el-button+.el-button{
+  padding: 0;
+}
+.BtnHPDel >>> .el-button:focus,.BtnHPDel >>> .el-button:hover{
+  background: #E8EBF0 !important;
+}
+/* .BtnHPDel >>> .el-button:hover .lookHp{
 
+} */
+.lookHp2{
+  color: #6c6c6c;
+}
+.lookHp2{
+  color: #487FFF;
+}
+/* .btnBh{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: 28px;
+  border-radius: 5px;
+}
+.btnBh:hover{
+  background: #F0F4FF;
+}
+.btnBh img{
+  margin-right: 5px;
+} */
+.btnBh2{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: 28px;
+  border-radius: 5px;
+}
+.btnBh2 img{
+  width: 14px;
+  margin-right: 5px;
+}
+.btnBh2:hover{
+  background: #FBEAE8;
+}
 .list_file_name {
   display: flex;
   align-items: center;
@@ -1044,3 +1286,128 @@ export default {
   margin-right: auto;
 }
 </style>
+<style>
+.custom-popover {
+  min-width: 88px !important;
+  width: auto !important;
+  padding: 8px;
+}
+.custom-popover2 {
+  min-width: 88px !important;
+  width: auto !important;
+  padding: 8px;
+  top: 414px !important;
+  text-align: center;
+}
+.BtnH >>> .el-button{
+  padding: 5px !important;
+  width: 30px !important;
+  color: #4C5567;
+}
+.BtnH >>> .el-button:focus,.BtnH >>> .el-button:hover{
+  background: #E8EBF0 !important;
+  color: #487FFF !important;
+}
+
+
+.BtnHPDel1 >>> .el-button:focus, .BtnHPDel1 >>> .el-button:hover{
+  background: #F0F4FF ;
+  color: #082e86 !important;
+}
+
+.BtnHPDel >>> .el-button:focus,.BtnHPDel >>> .el-button:hover{
+  background: #FBEAE8 !important;
+  color: #DE4C41 !important;
+}
+
+.BtnH >>> .el-button--small, .el-button--small.is-round{
+  border: none;
+  padding: 0;
+}
+.BtnHP{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHPDel{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHPDel1{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.BtnHP >>> .el-button{
+  color: #4C5567;
+  margin-left: 0 !important;
+}
+.BtnHP >>>.el-popper .popper__arrow, .el-popper .popper__arrow::after{
+  display: none;
+}
+.btnBh{
+  display: flex;
+  /* align-items: center; */
+  justify-content: center;
+  cursor: pointer;
+  /* height: 28px; */
+  padding: 4px 10px;
+  border-radius: 5px;
+}
+.btnBh:hover{
+  background: #F0F4FF;
+}
+.btnBh img{
+  margin-right: 5px;
+  width: 17px;
+}
+.btnBh2{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 5px;
+}
+.btnBh2 img{
+  width: 14px;
+  margin-right: 5px;
+}
+.btnBh2:hover{
+  background: #FBEAE8;
+}
+.lookHp2{
+  color: #6c6c6c;
+}
+.lookHp2{
+  color: #487FFF;
+}
+.list_file_box >>> .el-table__empty-text{
+  display: flex;
+  justify-content: center;
+  line-height: 22px !important;
+}
+.customC{
+  /* width: 100px; */
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  font-size: 14px;
+  margin-top: .5rem;
+  color: #667085;
+}
+
+</style>
+
+<style>
+.custom-popover {
+  min-width: 88px !important;
+  width: auto !important;
+  padding: 8px;
+}
+</style>

src/components/pages/knowledge/index.vue

@@ -2,20 +2,25 @@
   <div class="l_box">
     <div class="l_type_box" v-loading="isLoading">
       <div class="header">
-        <span class="title">知识库</span>
+        <img style="width: 35px;margin-right: 10px;" src="../../../assets/knowledge.png" alt="">
+        <span class="title">我的知识库</span>
       </div>
+
       <div class="nav">
+        
         <div class="nav_b" v-for="(item, index) in typeArray" :key="index">
-          <div class="nav_box" :class="{ open: item.open, active2: pid.split('/')[0] == item.id }" @click="checkType(item.id)">
-            <span class="icon" :class="{ haveL: item.child.length }" @click.stop="typeOpen(index)"></span>
+          <div class="nav_box" style="display: flex;justify-content: space-between;" :class="{ open: item.open, active2: pid.split('/')[0] == item.id }" @click="checkType(item.id)">
             <el-tooltip :content="item.name" placement="top" effect="dark">
               <span class="name">{{ item.name }}</span>
             </el-tooltip>
+            <span class="icon"  :class="{ haveL: item.child.length }" @click.stop="typeOpen(index)"></span>
+
           </div>
           <div class="nav_child_box" v-if="item.open && item.child.length">
             <div class="nav_box" :class="{ active: pid == item.id + '/' + item2.id }" v-for="(item2, index2) in item.child"
               :key="index + '-' + index2" @click="checkType(item.id + '/' + item2.id, item2.folderid)">
-              <span class="icon"></span>
+              <!-- <span class="icon"></span> -->
+              <img style="width: 20px;margin-right: 5px;" src="../../../assets/listfolder2.svg" alt="">
               <el-tooltip :content="item2.name" placement="top" effect="dark">
                 <span class="name">{{ item2.name }}</span>
               </el-tooltip>
@@ -25,12 +30,29 @@
       </div>
     </div>
     <div class="l_file_box">
-      <div class="bread_box">
+      <!-- <div class="bread_box">
         <span class="bread" :class="{is: getPid(item.name) == pid}" v-for="(item, index) in getBread()" :key="index" @click="checkType2(getPid(item.name) == pid, getPid(item.name))">{{ item.name }}</span>
+        </div> -->
+      <!-- <div v-if="pid.split('/').length == 1 && moFolderid" style="height: .5px;background-color: #e7e7e7;width: 100%;margin-bottom: 20px;margin-top: 20px;"></div> -->
+
+      <div class="BarCss" v-if="pid.split('/').length == 1">
+        <div class="BarBlock1" :class="barNam == 0 ? 'BarSpan':'' ">
+          <div class="BarBlock" @click="cutPage(0)" >所有文件夹</div>
+        </div>
+
+        <div class="BarBlock1" :class="barNam == 1 ? 'BarSpan':'' ">
+          <div class="BarBlock" @click="cutPage(1)" >所有文件</div>
         </div>
-      <folder :userid="userid" :typeArray="typeArray" :pid="pid" @checkType="checkType" v-if="pid.split('/').length == 1" ref="folder"></folder>
-      <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' ref="fileBox" v-if="pid.split('/').length == 1 && moFolderid" :moFolderid="moFolderid" :myFolderArray="myFolderArray">
+      </div>
+
+
+      <folder :userid="userid" :typeArray="typeArray" :pid="pid" @checkType="checkType" v-if="pid.split('/').length == 1 && barNam ==0" ref="folder"></folder>
+      
+      
+      <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' ref="fileBox" v-if="pid.split('/').length == 1 && moFolderid && barNam ==1" :moFolderid="moFolderid" :myFolderArray="myFolderArray">
       </fileBox>
+
+
       <folderDetail :userid="userid" :pid="pid" :typeArray="typeArray"  v-if="pid.split('/').length > 1 && folderid && moFolderid" :folderid="folderid" :moFolderid="moFolderid" @checkType="checkType"></folderDetail>
 
     </div>
@@ -56,6 +78,11 @@ export default {
   },
   data() {
     return {
+      navigationBarList:[
+          {tit:'所有文件夹'},
+          {tit:'所有文件'},
+      ],
+      barNam:0,
       userid: this.$route.query.userid,
       pid: '0',
       addInput: '',
@@ -63,7 +90,7 @@ export default {
       addVisbile2: '',
       isLoading: false,
       typeArray: [
-        { name: '我的知识库',child: [], id: '0' }
+        { name: '我的文件夹',child: [], id: '0', open:true }
       ],
       actionType: '',
       renameType: '',
@@ -113,6 +140,9 @@ export default {
     }
   },
   methods: {
+    cutPage(val){
+      this.barNam = val
+    },
     getData() {
       this.isLoading = true;
       let params = {
@@ -173,31 +203,35 @@ export default {
 .l_box {
   width: 100%;
   height: 100%;
-  background: #f0f2f5;
+  background: #F4F4F7;
   box-sizing: border-box;
   display: flex;
-  padding: 20px;
+  padding:10px 8px;
 }
 
 .l_type_box {
-  width: 300px;
+  width: 200px;
+  min-width: 200px;
   height: 100%;
   background: #fff;
+  padding: 10px;
+  box-sizing: border-box;
   border-radius: 5px;
+  /* border: 1px #ddd2d2 solid; */
 }
 
 .l_type_box>.header {
   width: 100%;
-  padding: 15px 15px;
+  padding: 10px 15px 10px 0;
   box-sizing: border-box;
   border-bottom: 1px solid #E7E7E7;
   display: flex;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   align-items: center;
 }
 
 .l_type_box>.header>.title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: bold;
 }
 
@@ -229,7 +263,7 @@ export default {
   width: 100%;
   height: calc(100% - 62px);
   box-sizing: border-box;
-  padding: 15px;
+  padding: 12px 6px;
   overflow: auto;
 }
 
@@ -242,6 +276,7 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
+  font-family: PingFang SC;
   border-radius: 5px;
   padding: 0 10px;
   box-sizing: border-box;
@@ -265,7 +300,9 @@ export default {
 }
 
 .l_type_box .active {
-  background: #3681fc;
+  background-color: #e9f2fc;
+  /* background: #3681fc; */
+  /* box-shadow: #b7b1b1 0px 3px 5px 0px !important; */
 }
 
 .l_type_box .active1 {
@@ -274,12 +311,15 @@ export default {
 
 .l_type_box .active .name,
 .l_type_box .active1 .name {
-  color: #fff !important;
+  color: #0354d7 !important;
+
+  /* color: #fff !important; */
 }
 
 
 .l_type_box>.nav>.nav_b>.nav_box:hover {
-  background: #e0eafb;
+  /* background: #e0eafb; */
+  background-color: #e9f2fc;
 }
 
 .l_type_box>.nav>.nav_b>.nav_box:hover .more {
@@ -287,10 +327,12 @@ export default {
 }
 
 .l_type_box>.nav>.nav_b>.nav_box>.icon {
-  min-width: 16px;
-  height: 16px;
+  /* min-width: 16px; */
+  height: 13.6px;
+  width: 14px;
   background-size: 100% 100%;
-  margin-right: 10px;
+  /* margin-right: 10px; */
+
   /* background: #000; */
   transition: all 0.3s;
 }
@@ -317,7 +359,7 @@ export default {
 }
 
 .l_type_box>.nav>.nav_b>.nav_box.active2>.haveL {
-  transform: rotate(-90deg);
+  transform: rotate(90deg) ;
   background-image: url('../../../assets/icon/sourceFile/icon_arrow_active.png');
 }
 
@@ -335,12 +377,15 @@ export default {
 }
 
 .l_type_box>.nav>.nav_b>.nav_child_box>.nav_box {
-  height: 44px;
+  height: 35px;
+  font-family: PingFang SC;
+  color: #2c3e50;
   width: 100%;
   display: flex;
   align-items: center;
+  margin: 8px 0;
   border-radius: 5px;
-  padding: 0 10px;
+  padding: 0 0 0 10px;
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -348,8 +393,9 @@ export default {
 
 .l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
   font-size: 14px;
-  color: #000000e6;
+  /* color: #000000e6; */
   white-space: nowrap;
+  color: #2c3e50;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -358,9 +404,9 @@ export default {
   background: #e0eafb;
 }
 
-.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
+/* .l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
   background: #5E9AFC;
-}
+} */
 
 
 .l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
@@ -498,13 +544,14 @@ export default {
 
 
 .l_file_box {
-  width: calc(100% - 320px);
-  margin-left: 20px;
-  background: #fff;
+  /* width: calc(100% - 320px); */
+  flex: 1;
+  /* margin-left: 20px; */
+  background: #F4F4F7;
   height: 100%;
   border-radius: 5px;
   overflow: auto;
-  padding: 10px;
+  padding: 0px 12px 0px 20px;
   box-sizing: border-box;
 }
 
@@ -541,4 +588,29 @@ export default {
   font-size: 14px;
   margin: 0 8px;
 }
+.BarCss{
+  color: rgba(8, 13, 30, .9);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  padding: 4px ;
+  /* margin-top: 25px; */
+  display: flex;
+  gap:20px;
+}
+.BarCss .BarBlock1{
+  display: flex;
+  /* align-items: center; */
+  padding: 4px 2px;
+  box-sizing: border-box !important;
+}
+.BarCss .BarBlock{
+  cursor: pointer;
+  height: 24px;
+  line-height: 24px;
+}
+.BarSpan{
+  color: #3370FE;
+  border-bottom: 2px #3370FF solid;
+}
 </style>