💄 update web ui

ileostar · Jan 18, 2024 · 8f2213d · 8f2213d
1 parent d1ed97d
commit 8f2213d
Show file tree

Hide file tree

Showing 6 changed files with 1,161 additions and 506 deletions.
diff --git a/apps/web/src/components/SideMenu.vue b/apps/web/src/components/SideMenu.vue
@@ -1,28 +1,28 @@
 <template>
   <div flex="~ col" justify-between items-center h-full>
-    <button class="btn btn-ghost btn-circle" h-8 w-8 flex items-center justify-center bg="gray/30" mt-2 z-99 mb="-15">
-      <svg t="1705559269734" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 1024 1024" stroke="currentColor" p-id="871"><path d="M435.15297223 271.84696889a48.54518557 48.54518557 0 1 0-68.6914378-68.69143666l-274.57156664 274.62011222a48.39955001 48.39955001 0 0 0 0 68.69143665l274.57156664 274.57156779a48.54518557 48.54518557 0 1 0 68.6914378-68.64289223l-240.29866666-240.29866667 240.29866666-240.29866666z" fill="#515151" p-id="872"></path><path d="M123.6385189 512a48.54518557 48.54518557 0 0 1 48.54518443-48.54518557h728.17777777a48.54518557 48.54518557 0 1 1 0 97.09037114H172.18370333a48.54518557 48.54518557 0 0 1-48.54518443-48.54518557z" fill="#515151" p-id="873"></path></svg>
+    <button class="btn btn-ghost btn-circle" h-10 w-10 flex items-center justify-center bg="gray/30" mt-2 z-99 mb="-15">
+      <svg t="1705559269734" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 1024 1024" stroke="currentColor" p-id="871"><path d="M435.15297223 271.84696889a48.54518557 48.54518557 0 1 0-68.6914378-68.69143666l-274.57156664 274.62011222a48.39955001 48.39955001 0 0 0 0 68.69143665l274.57156664 274.57156779a48.54518557 48.54518557 0 1 0 68.6914378-68.64289223l-240.29866666-240.29866667 240.29866666-240.29866666z" fill="#515151" p-id="872"></path><path d="M123.6385189 512a48.54518557 48.54518557 0 0 1 48.54518443-48.54518557h728.17777777a48.54518557 48.54518557 0 1 1 0 97.09037114H172.18370333a48.54518557 48.54518557 0 0 1-48.54518443-48.54518557z" fill="#515151" p-id="873"></path></svg>
     </button>
     <div flex="~ 1" h-full items-center>
-      <ul class="menu" rd-7 w-10 p-1 h-auto>
+      <ul class="menu" rd-7 w-12 p-1 h-auto>
         <li class="menu-item-active">
-          <a p="1.5">
-            <svg color-white xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+          <a p-2>
+            <svg color-white xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
           </a>
         </li>
         <li menu-item>
-          <a p="1.5">
-            <svg color-white xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+          <a p-2>
+            <svg color-white xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
           </a>
         </li>
         <li menu-item >
-          <a p="1.5" active:rd-9>
-            <svg t="1705557412397" class="icon h-5 w-5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="810"><path d="M838.22 756.41H187.78a89.1 89.1 0 0 1-89.1-89.1V198.54a89.1 89.1 0 0 1 89.1-89.1h650.44a89.1 89.1 0 0 1 89.1 89.1v468.77a89.1 89.1 0 0 1-89.1 89.1zM852 671.35V194.5a9 9 0 0 0-9-8.95H183a9 9 0 0 0-9 8.95v476.85a9 9 0 0 0 9 8.94h660a9 9 0 0 0 9-8.94z" fill="#ffffff" p-id="811"></path><path d="M287.01 832.52m37.86 0l376.26 0q37.86 0 37.86 37.86l0 0.39q0 37.86-37.86 37.86l-376.26 0q-37.86 0-37.86-37.86l0-0.39q0-37.86 37.86-37.86Z" fill="#ffffff" p-id="812"></path><path d="M249.34 337.78m31.68 0l11.97 0q31.68 0 31.68 31.68l0 203.04q0 31.68-31.68 31.68l-11.97 0q-31.68 0-31.68-31.68l0-203.04q0-31.68 31.68-31.68Z" fill="#ffffff" p-id="813"></path><path d="M400 451.95m37.67 0l-0.01 0q37.67 0 37.67 37.67l0 76.89q0 37.67-37.67 37.67l0.01 0q-37.67 0-37.67-37.67l0-76.89q0-37.67 37.67-37.67Z" fill="#ffffff" p-id="814"></path><path d="M550.67 261.67m37.67 0l-0.01 0q37.67 0 37.67 37.67l0 267.17q0 37.67-37.67 37.67l0.01 0q-37.67 0-37.67-37.67l0-267.17q0-37.67 37.67-37.67Z" fill="#ffffff" p-id="815"></path><path d="M701.33 413.89m37.67 0l-0.01 0q37.67 0 37.67 37.67l0 114.94q0 37.67-37.67 37.67l0.01 0q-37.67 0-37.67-37.67l0-114.94q0-37.67 37.67-37.67Z" fill="#ffffff" p-id="816"></path></svg>
+          <a p-2>
+            <svg t="1705557412397" class="icon h-6 w-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="810"><path d="M838.22 756.41H187.78a89.1 89.1 0 0 1-89.1-89.1V198.54a89.1 89.1 0 0 1 89.1-89.1h650.44a89.1 89.1 0 0 1 89.1 89.1v468.77a89.1 89.1 0 0 1-89.1 89.1zM852 671.35V194.5a9 9 0 0 0-9-8.95H183a9 9 0 0 0-9 8.95v476.85a9 9 0 0 0 9 8.94h660a9 9 0 0 0 9-8.94z" fill="#ffffff" p-id="811"></path><path d="M287.01 832.52m37.86 0l376.26 0q37.86 0 37.86 37.86l0 0.39q0 37.86-37.86 37.86l-376.26 0q-37.86 0-37.86-37.86l0-0.39q0-37.86 37.86-37.86Z" fill="#ffffff" p-id="812"></path><path d="M249.34 337.78m31.68 0l11.97 0q31.68 0 31.68 31.68l0 203.04q0 31.68-31.68 31.68l-11.97 0q-31.68 0-31.68-31.68l0-203.04q0-31.68 31.68-31.68Z" fill="#ffffff" p-id="813"></path><path d="M400 451.95m37.67 0l-0.01 0q37.67 0 37.67 37.67l0 76.89q0 37.67-37.67 37.67l0.01 0q-37.67 0-37.67-37.67l0-76.89q0-37.67 37.67-37.67Z" fill="#ffffff" p-id="814"></path><path d="M550.67 261.67m37.67 0l-0.01 0q37.67 0 37.67 37.67l0 267.17q0 37.67-37.67 37.67l0.01 0q-37.67 0-37.67-37.67l0-267.17q0-37.67 37.67-37.67Z" fill="#ffffff" p-id="815"></path><path d="M701.33 413.89m37.67 0l-0.01 0q37.67 0 37.67 37.67l0 114.94q0 37.67-37.67 37.67l0.01 0q-37.67 0-37.67-37.67l0-114.94q0-37.67 37.67-37.67Z" fill="#ffffff" p-id="816"></path></svg>
           </a>
         </li>
         <li menu-item >
-          <a p="1.5" active:rd-9>
-            <svg t="1705559862320" class="icon h-5 w-5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="969" ><path d="M876.7 587.7c-44.9 6.7-84.3 33.5-106.8 72.8-22.8 39.1-26.4 86.4-9.9 128.5-38.2 34.2-83.2 60.1-132 76.1-28.2-35.4-71.2-56-116.6-55.8-45.4-0.2-88.4 20.4-116.6 55.8-48.8-16-93.7-41.9-132-76 16.6-42.1 13-89.4-9.8-128.5-22.5-39.3-61.9-66.1-106.8-72.8-10.4-50.1-10.4-101.8 0-152 44.9-6.6 84.3-33.4 106.8-72.7 22.8-39.1 26.4-86.4 9.8-128.5 38.2-34.2 83.2-60.1 132-76.1 28.3 35.4 71.2 56 116.6 55.8 46.3 0 88.7-20.8 116.6-55.8 48.8 16 93.7 41.9 132 76.1-16.6 42.1-13 89.4 9.9 128.5 22.5 39.3 61.9 66.1 106.8 72.7 10.5 50 10.5 101.7 0 151.9m65.5-197.9c-4.7-16.9-20.7-28.2-38.3-27-28.3 1.9-55.3-12.5-69.4-37-14.3-24.5-13.3-54.9 2.5-78.5 9.7-14.6 7.9-33.9-4.3-46.4-57.8-59.5-131.1-101.7-211.7-122-17-4.3-34.7 3.9-42.5 19.6-12.5 25.4-38.5 41.5-66.9 41.4-28.4 0.1-54.4-16-66.9-41.4-7.8-15.7-25.5-23.8-42.5-19.6-80.6 20.2-153.9 62.5-211.8 122-12.2 12.6-14 31.9-4.3 46.5 15.8 23.5 16.8 54 2.5 78.4-14.1 24.6-41 38.9-69.4 37-17.6-1.3-33.6 10-38.2 27-11.3 39.6-17 80.7-17 121.9 0 41.4 5.7 82.4 16.9 121.9 4.8 16.9 20.7 28.1 38.2 27 28.3-1.8 55.2 12.6 69.4 37.1 14.3 24.6 13.4 54.7-2.5 78.4-9.7 14.6-7.9 33.9 4.3 46.4 57.8 59.5 131.2 101.8 211.8 122 17 4.3 34.7-3.8 42.5-19.5 12.5-25.4 38.5-41.5 66.9-41.3 28.6 0 54.2 15.8 66.9 41.3 7.8 15.7 25.5 23.8 42.5 19.6 80.6-20.2 153.9-62.5 211.8-122 12.2-12.6 14-31.9 4.3-46.5-15.8-23.5-16.7-53.9-2.5-78.3 14-24.7 41-39.1 69.4-37.1 17.5 1 33.5-10.1 38.3-27 11.3-39.7 17-80.7 16.9-121.9 0-41.5-5.7-82.5-16.9-122" fill="#ffffff" p-id="970"></path><path d="M511.6 623.2c-61.7 0-111.9-50.1-111.9-111.5 0-61.5 50.2-111.5 111.9-111.5s111.9 50 111.9 111.5-50.2 111.5-111.9 111.5m0-297.4c-102.8 0-186.5 83.4-186.5 185.9s83.7 185.9 186.5 185.9 186.5-83.4 186.5-185.9c-0.1-102.6-83.7-185.9-186.5-185.9" fill="#ffffff" p-id="971"></path></svg>
+          <a p-2>
+            <svg t="1705559862320" class="icon h-6 w-6" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="969" ><path d="M876.7 587.7c-44.9 6.7-84.3 33.5-106.8 72.8-22.8 39.1-26.4 86.4-9.9 128.5-38.2 34.2-83.2 60.1-132 76.1-28.2-35.4-71.2-56-116.6-55.8-45.4-0.2-88.4 20.4-116.6 55.8-48.8-16-93.7-41.9-132-76 16.6-42.1 13-89.4-9.8-128.5-22.5-39.3-61.9-66.1-106.8-72.8-10.4-50.1-10.4-101.8 0-152 44.9-6.6 84.3-33.4 106.8-72.7 22.8-39.1 26.4-86.4 9.8-128.5 38.2-34.2 83.2-60.1 132-76.1 28.3 35.4 71.2 56 116.6 55.8 46.3 0 88.7-20.8 116.6-55.8 48.8 16 93.7 41.9 132 76.1-16.6 42.1-13 89.4 9.9 128.5 22.5 39.3 61.9 66.1 106.8 72.7 10.5 50 10.5 101.7 0 151.9m65.5-197.9c-4.7-16.9-20.7-28.2-38.3-27-28.3 1.9-55.3-12.5-69.4-37-14.3-24.5-13.3-54.9 2.5-78.5 9.7-14.6 7.9-33.9-4.3-46.4-57.8-59.5-131.1-101.7-211.7-122-17-4.3-34.7 3.9-42.5 19.6-12.5 25.4-38.5 41.5-66.9 41.4-28.4 0.1-54.4-16-66.9-41.4-7.8-15.7-25.5-23.8-42.5-19.6-80.6 20.2-153.9 62.5-211.8 122-12.2 12.6-14 31.9-4.3 46.5 15.8 23.5 16.8 54 2.5 78.4-14.1 24.6-41 38.9-69.4 37-17.6-1.3-33.6 10-38.2 27-11.3 39.6-17 80.7-17 121.9 0 41.4 5.7 82.4 16.9 121.9 4.8 16.9 20.7 28.1 38.2 27 28.3-1.8 55.2 12.6 69.4 37.1 14.3 24.6 13.4 54.7-2.5 78.4-9.7 14.6-7.9 33.9 4.3 46.4 57.8 59.5 131.2 101.8 211.8 122 17 4.3 34.7-3.8 42.5-19.5 12.5-25.4 38.5-41.5 66.9-41.3 28.6 0 54.2 15.8 66.9 41.3 7.8 15.7 25.5 23.8 42.5 19.6 80.6-20.2 153.9-62.5 211.8-122 12.2-12.6 14-31.9 4.3-46.5-15.8-23.5-16.7-53.9-2.5-78.3 14-24.7 41-39.1 69.4-37.1 17.5 1 33.5-10.1 38.3-27 11.3-39.7 17-80.7 16.9-121.9 0-41.5-5.7-82.5-16.9-122" fill="#ffffff" p-id="970"></path><path d="M511.6 623.2c-61.7 0-111.9-50.1-111.9-111.5 0-61.5 50.2-111.5 111.9-111.5s111.9 50 111.9 111.5-50.2 111.5-111.9 111.5m0-297.4c-102.8 0-186.5 83.4-186.5 185.9s83.7 185.9 186.5 185.9 186.5-83.4 186.5-185.9c-0.1-102.6-83.7-185.9-186.5-185.9" fill="#ffffff" p-id="971"></path></svg>
           </a>
         </li>
       </ul>

diff --git a/apps/web/src/components/TheHeader.vue b/apps/web/src/components/TheHeader.vue
@@ -5,36 +5,53 @@ import config from '~/config/all.config'
 </script>
 
 <template>
-  <div w-full h-full flex items-center justify-between ml="-1.2">
+  <div w-full h-full flex items-center justify-between ml="-1">
     <div flex items-center>
-      <p w-18><Vue3Lottie :animationData="LogoJSON"/></p>
-      <h1 font-bold color-green-800 text-4>{{ config.web.projectName }}</h1>
+      <p w-21><Vue3Lottie :animationData="LogoJSON"/></p>
+      <h1 font-bold color-green-800 text-5>{{ config.web.projectName }}</h1>
+      <div flex="~ 1" ml-5 justify-center>
+        <div class="form-control">
+          <input type="text" placeholder="搜索" class="input input-bordered w-60 md:w-auto" bg="white/60" opacity-80 h-9 rd-5 />
+        </div>
+        <!-- <div class="flex-none">
+          <ul class="menu menu-horizontal px-1 py-0">
+            <li>
+              <details>
+                <summary>
+                  监控视角
+                </summary>
+                <ul id="supervisory-select" class="p-2 bg-base-100 z-50 w-full">
+                  <li><a>Monitor1</a></li>
+                  <li><a>Monitor2</a></li>
+                </ul>
+              </details>
+            </li>
+          </ul>
+        </div> -->
+      </div>
     </div>
     <div pr-3 flex items-center gap-3>
-      <div class="flex-none">
-        <ul class="menu menu-horizontal px-1 py-0">
-          <li>
-            <details>
-              <summary>
-                监控视角
-              </summary>
-              <ul id="supervisory-select" class="p-2 bg-base-100 z-50 w-full">
-                <li><a>Monitor1</a></li>
-                <li><a>Monitor2</a></li>
-              </ul>
-            </details>
-          </li>
-          <li><a>Link</a></li>
-        </ul>
-      </div>
       <div flex items-center gap-3>
         <button class="btn btn-ghost btn-circle" h-9 w-9 flex items-center justify-center>
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <i i-carbon:video-add h-5 w-5 />
+        </button>
+        <button class="btn btn-ghost btn-circle" h-9 w-9 flex items-center justify-center>
+          <i i-carbon:intent-request-create h-5 w-5 />
+        </button>
+        <label class="swap swap-rotate h-9 w-9 btn btn-ghost btn-circle" title="日夜间切换">
+
+          <!-- this hidden checkbox controls the state -->
+          <input type="checkbox" />
+          <i i-carbon:sun class="swap-on" ></i>
+          <i i-carbon:moon class="swap-off" ></i>
+        </label>
+        <button class="btn btn-ghost btn-circle" h-9 w-9 flex items-center justify-center title="国际化">
+          <i i-carbon:ibm-watson-language-translator />
         </button>
-        <button class="btn btn-ghost btn-circle" h-9 w-9>
+        <button class="btn btn-ghost btn-circle" h-9 w-9 title="通知告警">
           <div class="indicator">
             <div h-9 w-9 flex items-center justify-center>
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+              <i i-carbon:notification h-5 w-5></i>
             </div>
             <span class="badge badge-xs badge-primary indicator-item top-1.5 right-1.5"></span>
           </div>

diff --git a/apps/web/src/layouts/home.vue b/apps/web/src/layouts/home.vue
@@ -4,7 +4,7 @@
       <TheHeader/>
     </el-header>
     <el-container>
-      <el-aside px-2 flex items-center>
+      <el-aside px-3 flex items-center>
         <SideMenu/>
       </el-aside>
       <el-main>
@@ -19,7 +19,7 @@
   backdrop-filter: blur(20px);
   background: #CCDAED;  /* fallback for old browsers */
   background: -webkit-linear-gradient(180deg, rgba(237, 242, 224,.7), rgba(0, 201, 255,.7));  /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(260deg, rgba(237, 242, 224,.9), rgba(211, 223, 223,.8), rgba(0, 201, 255,.4)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background: linear-gradient(260deg, rgba(241, 255, 205, 0.8), rgba(229, 240, 240, 0.8), rgba(0, 201, 255,.4)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 
 .el-header {
@@ -34,7 +34,7 @@
   backdrop-filter: blur(6px) saturate(170%);
   -webkit-backdrop-filter: blur(6px) saturate(170%);
   background-color: rgba(255,255,255,0.76);
-  border-top-left-radius: 1.5rem;
+  border-top-left-radius: 2rem;
   padding: 1rem;
   border: 1px solid rgba(209, 213, 219, 0.3);
 }

diff --git a/apps/web/src/pages/index.vue b/apps/web/src/pages/index.vue
@@ -73,7 +73,6 @@ const { msg } = useStore('home')
         <a href="#item4" class="btn btn-xs">4</a>
       </div>
     </div>
-    {{ msg }}
     <!-- <div class="stats stats-vertical shadow">
       <div class="stat text-primary">
         <div class="stat-title">温度</div>

diff --git a/apps/web/uno.config.ts b/apps/web/uno.config.ts
@@ -14,8 +14,8 @@ export default defineConfig({
   shortcuts: [
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
-    ['menu-item','w-8 hover:bg-white/10 color-white rd-9 my-0.8'],
-    ['menu-item-active','w-8 bg-white/10 color-white rd-9 my-0.8']
+    ['menu-item','w-10 hover:bg-white/10 color-white rd-9 my-0.8'],
+    ['menu-item-active','w-10 bg-white/10 color-white rd-9 my-0.8']
   ],
   presets: [
     presetUno(),