@opensumi/ide-notebook 3.4.5-next-1730119322.0

package/src/browser/kernel-panel/collapse/icon.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+
+export function FileUnderKernel() {
+  return (
+    <svg
+      width='12px'
+      height='12px'
+      viewBox='0 0 12 12'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+    >
+      <title>CPU#1</title>
+      <g id='kernel管理面板' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+        <g id='2.0展开' transform='translate(-52.000000, -243.000000)' fill='#000000' fillRule='nonzero'>
+          <g id='编组-2' transform='translate(0.000000, 56.000000)'>
+            <g id='编组-11' transform='translate(40.000000, 0.000000)'>
+              <g id='编组-16备份-3' transform='translate(12.000000, 183.000000)'>
+                <g id='CPU#1' transform='translate(0.000000, 4.000000)'>
+                  <rect id='矩形' opacity='0' x='0' y='0' width='12' height='12'></rect>
+                  <path
+                    d='M3.00000391,2.00000391 L9.00000391,2.00000391 C9.66666406,2.00000391 10.0000039,2.33333594 10.0000039,3.00000391 L10.0000039,9.00000391 C10.0000039,9.66666406 9.66666406,10.0000039 9.00000391,10.0000039 L3.00000391,10.0000039 C2.33333594,10.0000039 2.00000391,9.66666406 2.00000391,9.00000391 L2.00000391,3.00000391 C2.00000391,2.33333594 2.33333594,2.00000391 3.00000391,2.00000391 Z'
+                    id='路径'
+                    opacity='0.3'
+                  ></path>
+                  <polygon id='路径' opacity='0.3' points='4.5 4.5 7.5 4.5 7.5 7.5 4.5 7.5'></polygon>
+                  <path
+                    d='M9.99999609,3.50000391 L10.4999961,3.50000391 C10.7751965,3.5013362 10.9975833,3.72480226 10.9975833,4.00000391 C10.9975833,4.27520165 10.7751965,4.4986677 10.4999961,4.50000391 L9.99999609,4.50000391 L9.99999609,3.50000391 L9.99999609,3.50000391 Z M9.99999609,5.49999609 L10.4999961,5.49999609 C10.7761445,5.49999609 10.9999961,5.72385548 10.9999961,5.99999609 C10.9999961,6.27614452 10.7761445,6.49999609 10.4999961,6.49999609 L9.99999609,6.49999609 L9.99999609,5.49999609 L9.99999609,5.49999609 Z M9.99999609,7.5 L10.4999961,7.5 C10.7751965,7.5013323 10.9975833,7.72479835 10.9975833,8 C10.9975833,8.27519774 10.7751965,8.4986638 10.4999961,8.5 L9.99999609,8.5 L9.99999609,7.5 L9.99999609,7.5 Z M1.5,3.49999802 L2.00000391,3.49999802 L2.00000391,4.49999802 L1.5,4.49999802 C1.32079125,4.50086759 1.15482306,4.4057587 1.0649673,4.25070236 C0.975111536,4.09564601 0.975111536,3.9043579 1.0649673,3.74930155 C1.15482306,3.5942452 1.32079125,3.49913631 1.5,3.49999802 L1.5,3.49999802 Z M1.49999609,5.49999609 L1.99999609,5.49999609 L1.99999609,6.49999609 L1.49999609,6.49999609 C1.22385547,6.49999609 0.999996094,6.27614453 0.999996094,5.99999609 C0.999996094,5.72385547 1.22385547,5.49999609 1.49999609,5.49999609 L1.49999609,5.49999609 Z M1.5,7.5 L2.00000391,7.5 L2.00000391,8.5 L1.5,8.5 C1.22480353,8.4986638 1.00241671,8.27519774 1.00241671,8 C1.00241671,7.72479835 1.22480353,7.5013323 1.5,7.5 L1.5,7.5 Z'
+                    id='形状'
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export function RunningKernel() {
+  return (
+    <svg
+      width='12px'
+      height='12px'
+      viewBox='0 0 12 12'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+    >
+      <title>py</title>
+      <g id='kernel管理面板' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+        <g id='2.0展开' transform='translate(-80.000000, -317.000000)' fillRule='nonzero'>
+          <g id='编组-2' transform='translate(0.000000, 56.000000)'>
+            <g id='编组-11' transform='translate(40.000000, 0.000000)'>
+              <g id='编组-10备份' transform='translate(26.000000, 258.000000)'>
+                <g id='py' transform='translate(14.000000, 3.000000)'>
+                  <rect id='矩形' fill='#000000' opacity='0' x='0' y='0' width='12' height='12'></rect>
+                  <path
+                    d='M5.75814393,11.7154535 C4.37245332,11.6681765 3.50787713,11.2545027 3.28285045,10.5217092 L3.25916343,10.4389745 L3.25916343,9.0206645 C3.25916343,7.38960802 3.25916343,7.36596952 3.34206799,7.10594602 C3.49603362,6.64499528 3.87502592,6.33769478 4.44351438,6.20768303 L4.57379298,6.18404453 L6.18451028,6.18404453 C7.3333307,6.18404453 7.81891459,6.18404453 7.86628863,6.16040603 C8.19790689,6.08949053 8.39924655,6.03039428 8.60058622,5.87674403 C8.84929992,5.69945528 9.03879607,5.39215479 9.10985713,5.06121579 C9.18091818,4.81301154 9.18091818,4.83665004 9.18091818,3.98566405 L9.18091818,3.19377431 L10.3297386,3.19377431 L10.4363302,3.21741281 C11.0285057,3.39470156 11.478559,3.9502063 11.6562117,4.80119229 C11.7272727,5.13213129 11.7272727,5.15576979 11.7272727,5.99493653 C11.7272727,6.81046477 11.7272727,6.81046477 11.6562117,7.09412677 C11.5851506,7.35415027 11.5259331,7.57871602 11.407498,7.80328176 C11.1824713,8.24059401 10.850853,8.54789451 10.4363302,8.68972551 C10.1876165,8.77246026 10.3889562,8.76064101 8.06762829,8.77246026 L5.97132711,8.77246026 L5.97132711,9.17431475 L8.75455184,9.17431475 L8.75455184,10.604444 C8.73086482,10.6871787 8.7071778,10.8053712 8.64796025,10.9117445 C8.5768992,11.0181177 8.39924655,11.1954065 8.29265497,11.2899605 C7.91366266,11.5381647 7.34517421,11.691815 6.5871896,11.7272727 L5.75814393,11.7272727 L5.75814393,11.7154535 Z M7.67679247,10.8290097 C7.93734968,10.7817327 8.13868935,10.5217092 8.09131531,10.2616857 C8.04394127,10.03712 7.88997565,9.88346974 7.67679247,9.848012 C7.34517421,9.800735 7.06092998,10.0962162 7.10830402,10.415336 C7.15567806,10.6635402 7.35701772,10.8171905 7.59388791,10.8290097 L7.67679247,10.8290097 Z M1.70766368,8.807918 C1.39973243,8.73700251 1.09180119,8.55971376 0.866774506,8.27605176 C0.452251674,7.76782401 0.250912012,6.90501877 0.274599031,5.82946703 C0.29828605,5.16758904 0.381190616,4.65936129 0.606217297,4.24568755 C0.866774506,3.6901828 1.26945383,3.38288231 1.80241176,3.27650906 C1.90900334,3.25287056 1.93269036,3.25287056 3.969774,3.25287056 L6.04238816,3.25287056 C6.06607518,3.25287056 6.06607518,3.22923206 6.06607518,3.05194331 L6.06607518,2.85101606 L3.28285045,2.85101606 L3.28285045,2.11822257 C3.28285045,1.32633283 3.28285045,1.34997133 3.3539115,1.19632108 C3.6026252,0.688093331 4.27770525,0.380792834 5.39099514,0.298058085 C5.47389971,0.298058085 5.67523937,0.274419585 5.87657903,0.274419585 C7.10830402,0.250781086 7.99656723,0.475346833 8.48215112,0.912659079 C8.52952516,0.959936079 8.58874271,1.04267083 8.63611675,1.06630933 C8.7071778,1.14904408 8.79008237,1.32633283 8.83745641,1.46816382 L8.86114343,1.55089857 L8.86114343,3.05194331 C8.86114343,4.43479555 8.86114343,4.55298804 8.83745641,4.63572279 C8.81376939,4.76573454 8.75455184,4.94302329 8.7071778,5.03757729 C8.52952516,5.36851629 8.22159391,5.60490129 7.80707108,5.72309378 C7.54651387,5.79400928 7.65310546,5.79400928 5.88842254,5.80582853 C4.12373962,5.80582853 4.23033121,5.80582853 3.99346102,5.87674403 C3.50787713,6.00675578 3.15257184,6.38497178 3.02229324,6.91683802 C2.95123218,7.16504227 2.95123218,7.14140377 2.95123218,7.99238976 L2.95123218,8.807918 L2.41827425,8.807918 C1.90900334,8.8315565 1.75503772,8.8315565 1.70766368,8.807918 Z M4.64485404,2.10640332 C4.8461937,2.02366857 4.97647231,1.77546432 4.92909827,1.57453707 C4.88172423,1.37360983 4.75144563,1.21995958 4.57379298,1.17268258 C4.28954875,1.08994783 3.98161751,1.25541733 3.93424347,1.57453707 C3.88686943,1.82274132 4.01714804,2.05912632 4.26586174,2.13004182 C4.31323577,2.15368032 4.3487663,2.15368032 4.44351438,2.15368032 C4.56194947,2.15368032 4.58563649,2.15368032 4.64485404,2.10640332 L4.64485404,2.10640332 Z'
+                    id='形状'
+                    fill='#FED142'
+                  ></path>
+                  <path
+                    d='M1.656,8.856 C1.344,8.784 1.032,8.604 0.804,8.316 C0.384,7.8 0.18,6.924 0.204,5.832 C0.228,5.16 0.312,4.644 0.54,4.224 C0.804,3.66 1.212,3.348 1.752,3.24 C1.86,3.216 1.884,3.216 3.948,3.216 L6.048,3.216 C6.072,3.216 6.072,3.192 6.072,3.012 L6.072,2.808 L3.252,2.808 L3.252,2.064 C3.252,1.26 3.252,1.284 3.324,1.128 C3.576,0.612 4.26,0.3 5.388,0.216 C5.472,0.216 5.676,0.192 5.88,0.192 C7.128,0.168 8.028,0.396 8.52,0.84 C8.568,0.888 8.628,0.972 8.676,0.996 C8.748,1.08 8.832,1.26 8.88,1.404 L8.904,1.488 L8.904,3.012 C8.904,4.416 8.904,4.536 8.88,4.62 C8.856,4.752 8.796,4.932 8.748,5.028 C8.568,5.364 8.256,5.604 7.836,5.724 C7.572,5.796 7.68,5.796 5.892,5.808 C4.104,5.808 4.212,5.808 3.972,5.88 C3.48,6.012 3.12,6.396 2.988,6.936 C2.916,7.188 2.916,7.164 2.916,8.028 L2.916,8.856 L2.376,8.856 C1.86,8.88 1.704,8.88 1.656,8.856 Z M4.632,2.052 C4.836,1.968 4.968,1.716 4.92,1.512 C4.872,1.308 4.74,1.152 4.56,1.104 C4.272,1.02 3.96,1.188 3.912,1.512 C3.864,1.764 3.996,2.004 4.248,2.076 C4.296,2.1 4.332,2.1 4.428,2.1 C4.548,2.1 4.572,2.1 4.632,2.052 L4.632,2.052 Z'
+                    id='形状'
+                    fill='#3571A3'
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export function existedLSP() {
+  return (
+    <svg
+      width='12px'
+      height='12px'
+      viewBox='0 0 12 12'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+    >
+      <title>robot-fill</title>
+      <g id='kernel管理面板' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' fillOpacity='0.45'>
+        <g id='2.0展开' transform='translate(-52.000000, -421.000000)' fill='#000000' fillRule='nonzero'>
+          <g id='编组-2' transform='translate(0.000000, 56.000000)'>
+            <g id='编组-11' transform='translate(40.000000, 0.000000)'>
+              <g id='编组-16备份-5' transform='translate(12.000000, 361.000000)'>
+                <g id='robot-fill' transform='translate(0.000000, 4.000000)'>
+                  <rect id='矩形' opacity='0' x='0' y='0' width='12' height='12'></rect>
+                  <path
+                    d='M9.984375,0.75 L2.015625,0.75 C1.80820313,0.75 1.640625,0.917578125 1.640625,1.125 L1.640625,8.859375 C1.640625,9.06679687 1.80820313,9.234375 2.015625,9.234375 L9.984375,9.234375 C10.1917969,9.234375 10.359375,9.06679687 10.359375,8.859375 L10.359375,1.125 C10.359375,0.917578125 10.1917969,0.75 9.984375,0.75 Z M3.515625,3.84375 C3.515625,3.45585937 3.83085937,3.140625 4.21875,3.140625 C4.60664063,3.140625 4.921875,3.45585937 4.921875,3.84375 C4.921875,4.23164063 4.60664063,4.546875 4.21875,4.546875 C3.83085937,4.546875 3.515625,4.23164063 3.515625,3.84375 Z M7.875,6.75 C7.875,6.8015625 7.8328125,6.84375 7.78125,6.84375 L4.21875,6.84375 C4.1671875,6.84375 4.125,6.8015625 4.125,6.75 L4.125,6.046875 C4.125,5.9953125 4.1671875,5.953125 4.21875,5.953125 L7.78125,5.953125 C7.8328125,5.953125 7.875,5.9953125 7.875,6.046875 L7.875,6.75 Z M7.78125,4.546875 C7.39335937,4.546875 7.078125,4.23164063 7.078125,3.84375 C7.078125,3.45585937 7.39335937,3.140625 7.78125,3.140625 C8.16914063,3.140625 8.484375,3.45585937 8.484375,3.84375 C8.484375,4.23164063 8.16914063,4.546875 7.78125,4.546875 Z M9.36328125,10.125 L2.63671875,10.125 C2.475,10.125 2.34375,10.2925781 2.34375,10.5 L2.34375,11.15625 C2.34375,11.2078125 2.3765625,11.25 2.41640625,11.25 L9.58242188,11.25 C9.62226563,11.25 9.65508591,11.2078125 9.65508591,11.15625 L9.65508591,10.5 C9.65625,10.2925781 9.525,10.125 9.36328125,10.125 L9.36328125,10.125 Z'
+                    id='形状'
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export function OpenedPage() {
+  return (
+    <svg
+      width='12px'
+      height='12px'
+      viewBox='0 0 12 12'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+    >
+      <title>广告主流水@2x</title>
+      <g id='kernel管理面板' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' opacity='0.45'>
+        <g id='2.0展开' transform='translate(-52.000000, -124.000000)' fill='#000000' fillRule='nonzero'>
+          <g id='编组-2' transform='translate(0.000000, 56.000000)'>
+            <g id='编组-11' transform='translate(40.000000, 0.000000)'>
+              <g id='编组-28' transform='translate(4.000000, 39.000000)'>
+                <g id='编组-16' transform='translate(8.000000, 25.000000)'>
+                  <g id='广告主流水@2x' transform='translate(0.000000, 4.000000)'>
+                    <rect id='矩形' opacity='0' x='0' y='0' width='12' height='12'></rect>
+                    <path
+                      d='M9.21733594,1.33333564 L2.784,1.33333564 C2.35266797,1.33333564 2.00000391,1.68399609 2.00000391,2.11266797 L2.00000391,10.1126719 C2.00000391,10.3573359 2.29133203,10.4866641 2.47332422,10.3226719 L3.03133594,9.82599609 C3.14104553,9.72791931 3.30734886,9.72936573 3.41533594,9.82933594 L4.23400781,10.589332 C4.33144663,10.6806592 4.47935125,10.6917615 4.58933203,10.6160039 L5.83933594,9.76265625 C5.93632187,9.69679836 6.06367813,9.69679836 6.16066406,9.76265625 L7.41399609,10.6173164 C7.52372385,10.6919995 7.67032569,10.6818078 7.76866406,10.5926602 L8.59733203,9.83199609 C8.70467578,9.73198828 8.87067187,9.73198828 8.97999609,9.82932422 L9.52467187,10.3193203 C9.60800658,10.3944788 9.72772048,10.4136655 9.83036936,10.3683149 C9.93301824,10.3229642 9.9994456,10.2215396 10.0000039,10.1093203 L10.0000039,2.11266797 C9.99852973,1.68156402 9.64844222,1.3329652 9.21733594,1.33333564 L9.21733594,1.33333564 Z M2.79998437,3.258 C2.79998437,3.03932813 2.97999609,2.85932813 3.20132812,2.85932813 L5.61199219,2.85932813 C5.832,2.85932813 6.01333594,3.03800391 6.01333594,3.258 C6.01333594,3.47667188 5.83333594,3.65732813 5.61200391,3.65732813 L3.20132812,3.65732813 C2.98060489,3.65697268 2.80145112,3.47871865 2.79998437,3.258 L2.79998437,3.258 Z M6.80199609,4.85132813 C6.80199609,5.07 6.62199609,5.25 6.40066406,5.25 L3.20132812,5.25 C2.98071328,5.25 2.8014584,5.07193813 2.79999609,4.85132813 C2.79999609,4.63265625 2.97999609,4.45265401 3.20132812,4.45265401 L6.40066406,4.45265401 C6.50675183,4.45230135 6.60863526,4.49410529 6.68390008,4.56887123 C6.7591649,4.64363717 6.80164547,4.74524035 6.80199609,4.85132813 L6.80199609,4.85132813 Z'
+                      id='形状'
+                    ></path>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export function KernelAndTerminal() {
+  return (
+    <svg
+      width='17px'
+      height='16px'
+      viewBox='0 0 17 16'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+    >
+      <title>app store-fill</title>
+      <g id='代码片段' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' fillOpacity='0.35'>
+        <g id='1.1搜索' transform='translate(-12.000000, -142.000000)' fill='#000000' fillRule='nonzero'>
+          <g id='编组-2' transform='translate(0.000000, 56.000000)'>
+            <g id='app-store-fill' transform='translate(12.092308, 86.000427)'>
+              <rect id='矩形' opacity='0' x='0' y='0' width='16.0001102' height='16.0001102'></rect>
+              <path
+                d='M13.500093,2.2500155 L8.75006028,2.2500155 C8.61255933,2.2500155 8.50005856,2.36251628 8.50005856,2.50001722 L8.50005856,7.25004994 C8.50005856,7.38755089 8.61255933,7.50005167 8.75006028,7.50005167 L13.500093,7.50005167 C13.6375939,7.50005167 13.7500947,7.38755089 13.7500947,7.25004994 L13.7500947,2.50001722 C13.7500947,2.36251628 13.6375939,2.2500155 13.500093,2.2500155 Z M13.500093,8.50005856 L8.75006028,8.50005856 C8.61255933,8.50005856 8.50005856,8.61255933 8.50005856,8.75006028 L8.50005856,13.500093 C8.50005856,13.6375939 8.61255933,13.7500947 8.75006028,13.7500947 L13.500093,13.7500947 C13.6375939,13.7500947 13.7500947,13.6375939 13.7500947,13.500093 L13.7500947,8.75006028 C13.7500947,8.61255933 13.6375939,8.50005856 13.500093,8.50005856 Z M7.25004994,2.2500155 L2.50001722,2.2500155 C2.36251628,2.2500155 2.2500155,2.36251628 2.2500155,2.50001722 L2.2500155,7.25004994 C2.2500155,7.38755089 2.36251628,7.50005167 2.50001722,7.50005167 L7.25004994,7.50005167 C7.38755089,7.50005167 7.50005167,7.38755089 7.50005167,7.25004994 L7.50005167,2.50001722 C7.50005167,2.36251628 7.38755089,2.2500155 7.25004994,2.2500155 Z M7.25004994,8.50005856 L2.50001722,8.50005856 C2.36251628,8.50005856 2.2500155,8.61255933 2.2500155,8.75006028 L2.2500155,13.500093 C2.2500155,13.6375939 2.36251628,13.7500947 2.50001722,13.7500947 L7.25004994,13.7500947 C7.38755089,13.7500947 7.50005167,13.6375939 7.50005167,13.500093 L7.50005167,8.75006028 C7.50005167,8.61255933 7.38755089,8.50005856 7.25004994,8.50005856 Z'
+                id='形状'
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/browser/kernel-panel/collapse/index.less

@@ -0,0 +1,95 @@
+.libro-panel-collapse-container {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.libro-panel-collapse-header {
+  user-select: none; // 双击不选中文本
+  color: var(--kernel-panel-collapse-header-label);
+  font-size: 12px;
+
+  .libro-panel-collapse-header-left {
+    display: inline-block;
+    cursor: pointer;
+
+    .libro-panel-collapse-header-icon {
+      display: inline-block;
+      margin-right: 5px;
+    }
+
+    .libro-panel-collapse-header-label {
+      display: inline-block;
+    }
+  }
+
+  .libro-panel-collapse-header-close-all {
+    // display: inline-block;
+    cursor: pointer;
+    color: var(--kernel-panel-collapse-header-close-all);
+    float: right;
+  }
+}
+
+.libro-panel-collapse-kernel-item-container {
+  margin-left: 15px;
+}
+
+.libro-panel-collapse-content,
+.libro-panel-collapse-kernel-item-container {
+  .libro-panel-collapse-item,
+  .libro-panel-collapse-kernel-item {
+    height: 20px;
+    cursor: pointer;
+    user-select: none; // 双击不选中文本
+    color: var(--kernel-panel-collapse-item);
+    font-size: 12px;
+    margin: 2px 0;
+    padding: 0 10px;
+    display: flex;
+
+    .libro-panel-collapse-item-toggle {
+      display: inline-block;
+      margin: auto 5px auto 0;
+    }
+
+    .libro-panel-collapse-item-icon,
+    .libro-panel-collapse-kernel-item-icon {
+      display: inline-block;
+      margin: auto 5px auto 0;
+
+      & > :first-child {
+        vertical-align: middle;
+      }
+    }
+
+    .libro-panel-collapse-item-label,
+    .libro-panel-collapse-kernel-item-name {
+      display: inline-block;
+      min-width: 50px;
+      white-space: nowrap; /* 避免文本换行 */
+      overflow: hidden; /* 隐藏超出div的内容 */
+      text-overflow: ellipsis; /* 在文本超出宽度时显示省略号 */
+      margin: auto 0;
+    }
+
+    .libro-panel-collapse-item-close {
+      // display: inline-block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: auto 0 auto auto;
+      width: 16px;
+      height: 16px;
+    }
+
+    .libro-panel-collapse-item-close:hover {
+      background: var(--kernel-panel-collapse-header-close-hover);
+      border-radius: 4px;
+    }
+  }
+
+  .libro-panel-collapse-item:hover {
+    background: var(--kernel-panel-collapse-item-hover);
+    border-radius: 4px;
+  }
+}

package/src/browser/kernel-panel/collapse/index.tsx

@@ -0,0 +1,111 @@
+import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ConfigProvider, Empty, Popconfirm, message, theme } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { IThemeService } from '@opensumi/ide-theme/lib/common';
+
+import {
+  LibroPanelCollapseItem,
+  LibroPanelCollapseItemType,
+  LibroPanelCollapseKernelItem,
+  Props,
+} from '../kernel.panel.protocol';
+
+import './index.less';
+import { LibroKernelCollapseContent } from './kernel-collapse-content';
+import { OpenedTabs } from './page-collapse-content';
+
+const getCollapseContentView = (
+  type: LibroPanelCollapseItemType,
+  items: LibroPanelCollapseItem[] | undefined,
+  refresh: () => void,
+) => {
+  if (!items) {
+    return (
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='暂无内容' className='kernel-and-terminal-panel-empty' />
+    );
+  }
+
+  switch (type) {
+    case LibroPanelCollapseItemType.PAGE:
+      return <OpenedTabs refresh={refresh} />;
+
+    case LibroPanelCollapseItemType.KERNEL:
+      return (
+        <LibroKernelCollapseContent type={type} items={items as LibroPanelCollapseKernelItem[]} refresh={refresh} />
+      );
+  }
+};
+
+const getCollapseHeaderLabel = (type: LibroPanelCollapseItemType) => {
+  switch (type) {
+    case LibroPanelCollapseItemType.PAGE:
+      return '已开启的标签页';
+    case LibroPanelCollapseItemType.KERNEL:
+      return '运行的内核';
+  }
+};
+
+export const LibroCollapse: React.FC<Props> = (props: Props) => {
+  const [open, setOpen] = useState<boolean>(true);
+  const themeService = useInjectable<IThemeService>(IThemeService);
+  const [themeType, setThemeType] = useState('dark');
+  useEffect(() => {
+    themeService.getCurrentTheme().then((theme) => {
+      setThemeType(theme.type);
+    });
+    themeService.onThemeChange((e) => {
+      setThemeType(e.type);
+    });
+  }, []);
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: themeType === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      }}
+    >
+      <div className='libro-panel-collapse-container' key={props.type}>
+        <div className='libro-panel-collapse-header'>
+          <div
+            className='libro-panel-collapse-header-left'
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            <div className='libro-panel-collapse-header-icon'>
+              {open ? <CaretDownOutlined /> : <CaretRightOutlined />}
+            </div>
+            <div className='libro-panel-collapse-header-label'>{getCollapseHeaderLabel(props.type)}</div>
+          </div>
+          <div className='libro-panel-collapse-header-close-all'>
+            <Popconfirm
+              title='你确定要关闭全部吗？'
+              okText='确定'
+              cancelText='取消'
+              onConfirm={() => {
+                if (props.shutdownAll) {
+                  props
+                    .shutdownAll()
+                    .then(() => {
+                      props.refresh();
+                    })
+                    .catch((e) => {
+                      message.error(`shutdown all ${props.type}s error`);
+                    });
+                }
+              }}
+            >
+              关闭全部
+            </Popconfirm>
+          </div>
+        </div>
+        {open && (
+          <div className='libro-panel-collapse-content'>
+            {getCollapseContentView(props.type, props.items, props.refresh)}
+          </div>
+        )}
+      </div>
+    </ConfigProvider>
+  );
+};

package/src/browser/kernel-panel/collapse/kernel-collapse-content-item.tsx

@@ -0,0 +1,77 @@
+import { CaretDownOutlined, CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+
+import { URI, useInjectable } from '@opensumi/ide-core-browser';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
+
+import { LibroPanelCollapseKernelItem } from '../kernel.panel.protocol';
+
+import { FileUnderKernel, RunningKernel } from './icon';
+
+interface Props {
+  item: LibroPanelCollapseKernelItem;
+  refresh: () => void;
+}
+
+export const LibroKernelCollapseContentItem: React.FC<Props> = (props: Props) => {
+  const item = props.item;
+  const [open, setOpen] = useState<boolean>(true);
+  const editorService = useInjectable<WorkbenchEditorServiceImpl>(WorkbenchEditorService);
+
+  return (
+    <>
+      <div
+        className='libro-panel-collapse-item'
+        key={item.id}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <div className='libro-panel-collapse-item-toggle'>{open ? <CaretDownOutlined /> : <CaretRightOutlined />}</div>
+        <div className='libro-panel-collapse-item-icon'>
+          <RunningKernel></RunningKernel>
+        </div>
+        <div className='libro-panel-collapse-item-label'>{item.name}</div>
+        <div
+          className='libro-panel-collapse-item-close'
+          onClick={async (e) => {
+            if (item.shutdown) {
+              item
+                .shutdown()
+                .then(() => {
+                  props.refresh();
+                })
+                .catch((error) => {
+                  // console.error(error);
+                });
+            }
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          <CloseOutlined />
+        </div>
+      </div>
+      {open && (
+        <div className='libro-panel-collapse-kernel-item-container'>
+          {item.notebooks.map((notebook) => (
+            <div
+              className='libro-panel-collapse-kernel-item'
+              key={notebook.sessionId}
+              onClick={() => {
+                const uri = new URI(notebook.path);
+                editorService.openUris([uri]);
+              }}
+            >
+              <div className='libro-panel-collapse-kernel-item-icon'>
+                <FileUnderKernel></FileUnderKernel>
+              </div>
+              <div className='libro-panel-collapse-kernel-item-name'>{notebook.name}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

package/src/browser/kernel-panel/collapse/kernel-collapse-content.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { LibroPanelCollapseItemType, LibroPanelCollapseKernelItem } from '../kernel.panel.protocol';
+
+import { LibroKernelCollapseContentItem } from './kernel-collapse-content-item';
+
+interface Props {
+  type: LibroPanelCollapseItemType;
+  items: LibroPanelCollapseKernelItem[];
+  refresh: () => void;
+}
+
+export const LibroKernelCollapseContent: React.FC<Props> = (props: Props) => (
+    <>
+      {props.items.map((item) => <LibroKernelCollapseContentItem item={item} key={item.id} refresh={props.refresh} />)}
+    </>
+  );

package/src/browser/kernel-panel/collapse/page-collapse-content.tsx

@@ -0,0 +1,53 @@
+import { CloseOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+
+import { URI, useInjectable } from '@opensumi/ide-core-browser';
+import { IResource, ResourceService, WorkbenchEditorService } from '@opensumi/ide-editor';
+import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
+
+export const OpenedTab: React.FC<{ item: URI; refresh: () => void }> = ({ item, refresh }) => {
+  const [resource, setResource] = useState<IResource>();
+  const resourceService = useInjectable<ResourceService>(ResourceService);
+  const editorService = useInjectable<WorkbenchEditorServiceImpl>(WorkbenchEditorService);
+
+  useEffect(() => {
+    resourceService.getResource(item).then((resource) => {
+      if (resource !== null) {setResource(resource);}
+    });
+  }, []);
+
+  return (
+    <div
+      title={item.displayName}
+      className='libro-panel-collapse-item'
+      // onClick={() => {
+      //   tabs.onChange(item.id);
+      // }}
+    >
+      {resource?.icon && <span className={`libro-panel-collapse-item-icon ${resource.icon}`}></span>}
+      <div className='libro-panel-collapse-item-label'>{item.displayName}</div>
+      <div
+        className='libro-panel-collapse-item-close'
+        onClick={(e) => {
+          e.stopPropagation();
+          editorService.close(item).then(() => {
+            refresh();
+          });
+        }}
+      >
+        <CloseOutlined />
+      </div>
+    </div>
+  );
+};
+
+export const OpenedTabs: React.FC<{ refresh: () => void }> = ({ refresh }) => {
+  const editorService = useInjectable<WorkbenchEditorServiceImpl>(WorkbenchEditorService);
+  const openedUris = editorService.getAllOpenedUris();
+
+  return (
+    <div>
+      {openedUris.map((item) => <OpenedTab item={item} refresh={refresh} key={item.toString()}></OpenedTab>)}
+    </div>
+  );
+};

package/src/browser/kernel-panel/index.less

@@ -0,0 +1,20 @@
+.mana-app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.mana-toolbar {
+  display: flex;
+}
+.kernel-and-panel {
+  height: 100%;
+  padding: 0 10px;
+  overflow-y: scroll;
+}
+
+.kernel-and-panel-header {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/src/browser/kernel-panel/index.ts

@@ -0,0 +1,4 @@
+export * from './kernel-panel-view';
+export * from './kernel.panel.color.tokens';
+export * from './kernel.panel.contribution';
+export * from './kernel.panel.protocol';

package/src/browser/kernel-panel/kernel-panel-view.tsx

@@ -0,0 +1,104 @@
+import { LibroKernelManager, LibroSessionManager } from '@difizen/libro-kernel';
+import { Container } from '@difizen/mana-app';
+import { useEffect, useState } from 'react';
+import React from 'react';
+
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { IThemeService } from '@opensumi/ide-theme/lib/common';
+
+import { ManaContainer } from '../mana';
+
+import { LibroCollapse } from './collapse';
+import './index.less';
+import { LibroPanelCollapseItemType, LibroPanelCollapseKernelItem } from './kernel.panel.protocol';
+
+export const KernelPanel: React.FC = () => {
+  const manaContainer = useInjectable<Container>(ManaContainer);
+
+  const libroKernelManager = manaContainer.get(LibroKernelManager);
+
+  const libroSessionManager = manaContainer.get(LibroSessionManager);
+
+  const [refresh, setRefresh] = useState(new Date().toUTCString());
+
+  const themeService = useInjectable<IThemeService>(IThemeService);
+
+  const [theme, setTheme] = useState<string>('dark');
+
+  const [kernelItems, setKernelItems] = useState<LibroPanelCollapseKernelItem[] | undefined>();
+
+  const handleRefresh = () => {
+    setRefresh(new Date().toUTCString());
+  };
+
+  useEffect(() => {
+    themeService.getCurrentTheme().then((curTheme) => {
+      setTheme(curTheme.type);
+    });
+    themeService.onThemeChange((curTheme) => {
+      setTheme(curTheme.type);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!libroSessionManager.running || (libroSessionManager.running && libroSessionManager.running.size === 0)) {
+      setKernelItems(undefined);
+      return;
+    }
+
+    // kernelId -> item
+    const items = new Map<string, LibroPanelCollapseKernelItem>();
+
+    const runningSessions = libroSessionManager.running.values();
+
+    for (const session of runningSessions) {
+      const kernel = session.kernel!;
+      if (items.has(kernel.id)) {
+        items.get(kernel.id)?.notebooks.push({
+          sessionId: session.id,
+          name: session.name,
+          path: session.path,
+        });
+      } else {
+        items.set(kernel.id, {
+          id: kernel.id,
+          name: kernel.name,
+          shutdown: async () => {
+            await libroKernelManager.shutdown(kernel.id);
+            await libroSessionManager.refreshRunning();
+          },
+          notebooks: [{ sessionId: session.id, name: session.name, path: session.path }],
+        });
+      }
+    }
+
+    setKernelItems(Array.from(items.values()));
+  }, [libroKernelManager, libroSessionManager.running]);
+
+  return (
+    <div className='kernel-and-panel' key={refresh}>
+      <div className='kernel-and-panel-header'>
+        <div className='kernel-and-panel-title'>运行的终端和内核</div>
+        <img
+          width={16}
+          height={16}
+          src={
+            theme === 'dark'
+              ? 'https://mdn.alipayobjects.com/huamei_xt20ge/afts/img/A*rY0oTpYcmZsAAAAAAAAAAAAADiuUAQ/original'
+              : 'https://mdn.alipayobjects.com/huamei_xt20ge/afts/img/A*VApRSqHz8wQAAAAAAAAAAAAADiuUAQ/original'
+          }
+          onClick={handleRefresh}
+        ></img>
+      </div>
+      <LibroCollapse
+        type={LibroPanelCollapseItemType.KERNEL}
+        refresh={handleRefresh}
+        items={kernelItems}
+        shutdownAll={async () => {
+          await libroKernelManager.shutdownAll();
+          await libroSessionManager.refreshRunning();
+        }}
+      />
+    </div>
+  );
+};