feat: 登录页、首页完善

index.html

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 14:35:28
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-22 16:41:52
+ * @LastEditTime: 2024-01-24 11:33:27
  * @FilePath: \General-AI-Platform-Web-Client\index.html
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -21,7 +21,7 @@
     <!-- update 2024-01-21 16:41 -->
     <link
       rel="stylesheet"
-      href="//at.alicdn.com/t/c/font_4412653_qo2xb6ruq6q.css"
+      href="//at.alicdn.com/t/c/font_4412653_g3j0o4m1zi.css"
     />
     <script src="https://threejs.org/build/three.js"></script>
     <script>

src/layout/components/navbar.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 // import Search from "./search/index.vue";
-import Notice from "./notice/index.vue";
+// import Notice from "./notice/index.vue";
 import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 // import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
-import globalization from "@/assets/svg/globalization.svg?component";
+// import globalization from "@/assets/svg/globalization.svg?component";
 import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
 // import Setting from "@iconify-icons/ri/settings-3-line";
-import Check from "@iconify-icons/ep/check";
+// import Check from "@iconify-icons/ep/check";
 
 const {
   layout,
@@ -19,13 +19,16 @@ const {
   // pureApp,
   username,
   userAvatar,
-  avatarsStyle,
+  avatarsStyle
   // toggleSideBar,
-  getDropdownItemStyle,
+  // getDropdownItemStyle,
-  getDropdownItemClass
+  // getDropdownItemClass
 } = useNav();
 
-const { t, locale, translationCh, translationEn } = useTranslationLang();
+const {
+  t
+  //  locale, translationCh, translationEn
+} = useTranslationLang();
 </script>
 
 <template>
@@ -47,9 +50,9 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <!-- 菜单搜索 -->
       <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 国际化 -->
-      <el-dropdown id="header-translation" trigger="click">
+      <!-- <el-dropdown id="header-translation" trigger="click">
         <globalization
           class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
@@ -79,7 +82,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
-      </el-dropdown>
+      </el-dropdown> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="select-none el-dropdown-link navbar-bg-hover">

src/layout/components/sidebar/breadCrumb.vue

@@ -96,7 +96,7 @@ watch(
         v-for="item in levelList"
         :key="item.path"
       >
-        <span :class="['text-web-font1 text-[14px] font-bold mr-[16px]']">{{
+        <span :class="['text-web-font1 text-[20px] font-bold mr-[16px]']">{{
           transformI18n(item.meta.title)
         }}</span>
       </el-breadcrumb-item>

src/layout/index.vue

@@ -124,14 +124,7 @@ const layoutHeader = defineComponent({
     return h(
       "div",
       {
-        class: { "fixed-header": set.fixedHeader },
+        class: { "fixed-header": set.fixedHeader }
-        style: [
-          set.hideTabs && layout.value.includes("horizontal")
-            ? isDark.value
-              ? "box-shadow: 0 1px 4px #0d0d0d"
-              : "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
-            : ""
-        ]
       },
       {
         default: () => [

src/router/modules/workbench.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-12 14:35:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-24 10:36:26
+ * @FilePath: \General-AI-Platform-Web-Client\src\router\modules\workbench.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { $t } from "@/plugins/i18n";
 
 const Layout = () => import("@/layout/index.vue");
@@ -9,7 +17,7 @@ export default {
   redirect: "/workbench",
   meta: {
     title: $t("menus.hshome"),
-    icon: "",
+    icon: "icon-gongzuotai-weixuan",
     // showLink: false,
     rank: 1
   },

src/style/login.css

@@ -1,90 +0,0 @@
-.wave {
-  position: fixed;
-  height: 100%;
-  left: 0;
-  bottom: 0;
-  z-index: -1;
-}
-
-.login-container {
-  width: 100vw;
-  height: 100vh;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 18rem;
-  padding: 0 2rem;
-}
-
-.img {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.img img {
-  width: 500px;
-}
-
-.login-box {
-  display: flex;
-  align-items: center;
-  text-align: center;
-}
-
-.login-form {
-  width: 360px;
-}
-
-.avatar {
-  width: 350px;
-  height: 80px;
-}
-
-.login-form h2 {
-  text-transform: uppercase;
-  margin: 15px 0;
-  color: #999;
-  font: bold 200% Consolas, Monaco, monospace;
-}
-
-@media screen and (max-width: 1180px) {
-  .login-container {
-    grid-gap: 9rem;
-  }
-
-  .login-form {
-    width: 290px;
-  }
-
-  .login-form h2 {
-    font-size: 2.4rem;
-    margin: 8px 0;
-  }
-
-  .img img {
-    width: 360px;
-  }
-
-  .avatar {
-    width: 280px;
-    height: 80px;
-  }
-}
-
-@media screen and (max-width: 968px) {
-  .wave {
-    display: none;
-  }
-
-  .img {
-    display: none;
-  }
-
-  .login-container {
-    grid-template-columns: 1fr;
-  }
-
-  .login-box {
-    justify-content: center;
-  }
-}

src/views/login/index.vue

@@ -87,137 +87,167 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="select-none login_wrap">
-    <div class="absolute flex-c right-5 top-3">
+    <div class="flex flex-col justify-center login-container">
-      <!-- 主题 -->
+      <div class="login_head">
-      <el-switch
+        <svg
-        v-model="dataTheme"
+          xmlns="http://www.w3.org/2000/svg"
-        inline-prompt
+          width="200"
-        :active-icon="dayIcon"
+          height="70"
-        :inactive-icon="darkIcon"
+          viewBox="0 0 200 70"
-        @change="dataThemeChange"
+          fill="none"
-      />
+        >
-      <!-- 国际化 -->
+          <mask
-      <el-dropdown trigger="click">
+            id="mask0_3706_111045"
-        <globalization
+            style="mask-type: alpha"
-          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
+            maskUnits="userSpaceOnUse"
-        />
+            x="0"
-        <template #dropdown>
+            y="0"
-          <el-dropdown-menu class="translation">
+            width="200"
-            <el-dropdown-item
+            height="70"
-              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
-              @click="translationCh"
-            >
-              <IconifyIconOffline
-                class="check-zh"
-                v-show="locale === 'zh'"
-                :icon="Check"
-              />
-              简体中文
-            </el-dropdown-item>
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
-              @click="translationEn"
-            >
-              <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline :icon="Check" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-    <div class="login-container">
-      <div class="img">
-        <component :is="toRaw(illustration)" />
-      </div>
-      <div class="login-box">
-        <div class="login-form">
-          <avatar class="avatar" />
-          <Motion>
-            <h2 class="outline-none">{{ title }}</h2>
-          </Motion>
-
-          <el-form
-            ref="ruleFormRef"
-            :model="ruleForm"
-            :rules="loginRules"
-            size="large"
           >
-            <Motion :delay="100">
+            <rect width="200" height="70" fill="#D9D9D9" />
-              <el-form-item
+          </mask>
-                :rules="[
+          <g mask="url(#mask0_3706_111045)">
-                  {
+            <path
-                    required: true,
+              d="M26.9285 11.4226L21.0505 12.6996C20.9127 12.7385 20.8662 12.9165 20.9682 13.0202L25.6026 17.8206C25.7028 17.9244 25.8763 17.878 25.9121 17.7353L27.1557 11.658C27.1933 11.5153 27.0662 11.3855 26.9285 11.4226Z"
-                    message: transformI18n($t('login.usernameReg')),
+              fill="#E42F2F"
-                    trigger: 'blur'
+            />
-                  }
+            <path
-                ]"
+              d="M30.1121 8.17731L21.5985 10.5404C21.4983 10.5682 21.4661 10.698 21.5377 10.7739L27.7699 17.2294C27.8433 17.3054 27.9685 17.2701 27.9953 17.1664L30.2767 8.34783C30.3036 8.24404 30.2123 8.14951 30.1121 8.17731Z"
-                prop="username"
+              fill="#FAEC18"
-              >
+            />
-                <el-input
+            <path
-                  clearable
+              d="M47.6445 36.668L37.635 26.3L33.7343 22.2596C33.473 21.989 33.049 21.989 32.7859 22.2596L15.8052 39.8485C15.4939 40.171 14.9875 40.171 14.6762 39.8485L10.0454 35.0518C9.73403 34.7294 9.73403 34.2048 10.0454 33.8823L24.2473 19.1718C24.5085 18.9012 24.5085 18.462 24.2473 18.1895L20.3931 14.1973C20.1318 13.9267 19.7077 13.9267 19.4447 14.1973L0.196908 34.1381C-0.0643339 34.4087 -0.0643339 34.848 0.196908 35.1204L10.3263 45.6126L14.227 49.653C14.4883 49.9236 14.9123 49.9236 15.1754 49.653L32.8736 31.3209C33.185 30.9984 33.6913 30.9984 34.0027 31.3209L38.6335 36.1176C38.9448 36.4401 38.9448 36.9646 38.6335 37.2871L20.9352 55.6191C20.674 55.8897 20.674 56.329 20.9352 56.6015L24.6695 60.4695C24.9308 60.7401 25.3549 60.7401 25.6179 60.4695L47.6463 37.6522C47.9058 37.3779 47.9058 36.9386 47.6445 36.668Z"
-                  v-model="ruleForm.username"
+              fill="#154DDD"
-                  :placeholder="t('login.username')"
+            />
-                  :prefix-icon="useRenderIcon(User)"
+            <path
-                />
+              d="M80.7311 17.9947H77.174V15.6519H70.421V17.6814H66.8638V15.6519H60.8052L60.5332 12.4678H66.8638V10.0639H70.421V12.4678H77.174V10.0639H80.7311V12.4678H87.4536V15.6519H80.7311V17.9947ZM60.5332 31.7025L63.1868 24.7077H66.5632L64.0618 31.7025H60.5332ZM82.2986 33.2946C82.057 35.6984 80.5504 37.1978 78.0185 37.3535C76.5405 37.4777 74.1894 37.2905 72.23 36.9476L71.4463 33.8561C73.1945 34.199 75.2451 34.3566 76.4797 34.262C77.9273 34.199 78.6197 33.5133 78.711 32.1695C78.9221 29.4524 78.8917 26.1423 78.711 23.5512C78.6806 23.2398 78.5911 23.1138 78.2887 23.1138H72.9833C72.5915 30.6386 69.487 34.3547 62.0398 38.1338L61.1058 34.6068C66.4111 31.8285 68.9126 28.5498 69.3653 23.1156H62.7341L62.4925 19.9926H69.4262V17.9316H73.0442V19.9926H79.9778C81.395 19.9926 82.1787 20.8971 82.2986 22.3038C82.3594 22.8969 82.3881 23.4585 82.4185 24.0535H85.7037L88.1157 31.734H84.469L82.4489 24.7392C82.6296 27.7677 82.5688 30.735 82.2986 33.2946Z"
-              </el-form-item>
+              fill="#154DDD"
-            </Motion>
+            />
-
+            <path
-            <Motion :delay="150">
+              d="M98.3073 28.0493V28.205C98.3073 31.202 98.2178 34.1063 97.282 38.0095H93.5137C94.87 33.0127 94.9004 29.8286 94.9004 26.2997V12.7475C94.9004 11.3427 95.7145 10.5624 97.1621 10.5624H102.015C103.462 10.5624 104.275 11.3112 104.275 12.7475V34.918C104.275 36.6362 103.13 37.6963 101.412 37.8223C100.537 37.8854 99.6332 37.7593 99.0606 37.6036L98.3073 34.388C98.7904 34.5122 99.4829 34.5752 99.9946 34.5752C100.567 34.5752 100.87 34.2323 100.87 33.7004V28.0493H98.3073ZM100.87 14.0598C100.87 13.8726 100.75 13.7465 100.569 13.7465H98.6401C98.4594 13.7465 98.3091 13.8707 98.3091 14.0598V17.9946H100.871V14.0598H100.87ZM100.87 20.8673H98.3073V25.1765H100.87V20.8673ZM121.035 34.0136V37.2608H105.33L105.03 34.0136H111.602V27.6749H106.749L106.447 24.4277H111.602V18.5876H108.979C108.707 19.8684 108.376 21.086 107.954 22.2407H104.638C105.783 18.9305 106.386 15.4646 106.477 11.4687H109.704C109.673 12.8106 109.584 14.1228 109.462 15.3405H111.602V9.93777H115.129V15.3405H120.103V18.5876H115.129V24.4277H119.922V27.6749H115.129V34.0136H121.035Z"
-              <el-form-item prop="password">
+              fill="#154DDD"
-                <el-input
+            />
-                  clearable
+            <path
-                  show-password
+              d="M154.287 34.388L153.201 38.2912C146.539 35.387 142.56 33.0146 140.45 28.5182C138.34 32.7329 134.18 35.8244 127.427 38.2597L126.463 34.5121C134 31.4522 137.074 28.8296 138.099 24.2072H127.307L126.976 20.897H138.462C138.493 20.4911 138.493 20.0537 138.493 19.6163V14.714H129.177L128.877 11.5298H152.088V14.714H142.168V20.3651V20.8951H153.713V24.2053H142.377C144.099 29.6729 148.529 32.1713 154.287 34.388Z"
-                  v-model="ruleForm.password"
+              fill="#154DDD"
-                  :placeholder="t('login.password')"
+            />
-                  :prefix-icon="useRenderIcon(Lock)"
+            <path
-                />
+              d="M60.0254 52.9445L62.0276 52.7461C62.1475 53.4282 62.3927 53.9305 62.7613 54.2493C63.1299 54.5699 63.6273 54.7293 64.2518 54.7293C64.9138 54.7293 65.4148 54.5866 65.7494 54.303C66.0858 54.0176 66.254 53.6858 66.254 53.304C66.254 53.0594 66.1825 52.8518 66.0411 52.6794C65.8998 52.5071 65.6528 52.3588 65.3003 52.2309C65.0588 52.1456 64.5094 51.9955 63.6524 51.7787C62.5483 51.5007 61.7754 51.1596 61.3298 50.7556C60.7035 50.1866 60.3904 49.4916 60.3904 48.6723C60.3904 48.146 60.5371 47.653 60.8324 47.1933C61.1276 46.7337 61.5499 46.3852 62.1046 46.1443C62.6593 45.9052 63.3267 45.7847 64.1104 45.7847C65.3898 45.7847 66.3525 46.0702 67.0002 46.6391C67.6479 47.2081 67.9861 47.968 68.0183 48.9188L65.9606 49.0115C65.8729 48.4796 65.6832 48.0978 65.3934 47.8643C65.1035 47.6307 64.6687 47.5158 64.089 47.5158C63.4913 47.5158 63.0225 47.64 62.6843 47.8902C62.466 48.0496 62.3569 48.2646 62.3569 48.5333C62.3569 48.778 62.4589 48.9874 62.6629 49.1616C62.9223 49.3822 63.5522 49.6139 64.5542 49.853C65.5562 50.0921 66.2952 50.3404 66.7765 50.598C67.2579 50.8557 67.6318 51.206 67.902 51.6489C68.174 52.0937 68.3082 52.6424 68.3082 53.2966C68.3082 53.8897 68.1454 54.4457 67.8215 54.9628C67.4976 55.4799 67.0378 55.8654 66.4455 56.1175C65.8514 56.3696 65.1125 56.4956 64.2267 56.4956C62.9384 56.4956 61.9489 56.1935 61.2582 55.5893C60.5729 54.9832 60.1614 54.1028 60.0254 52.9445Z"
-              </el-form-item>
+              fill="#154DDD"
-            </Motion>
+            />
-
+            <path
-            <Motion :delay="250">
+              d="M69.7461 45.9624H71.8038V51.5671C71.8038 52.4568 71.8289 53.0332 71.8808 53.2964C71.9684 53.7208 72.1778 54.06 72.5106 54.3158C72.8416 54.5715 73.2943 54.7013 73.8705 54.7013C74.4538 54.7013 74.894 54.5808 75.191 54.338C75.488 54.0952 75.667 53.7987 75.726 53.4447C75.7869 53.0925 75.8173 52.505 75.8173 51.6876V45.9624H77.875V51.3985C77.875 52.6403 77.8195 53.5188 77.7086 54.0322C77.5977 54.5456 77.3919 54.9774 77.0931 55.3314C76.7943 55.6854 76.3934 55.9653 75.8942 56.1747C75.3932 56.3842 74.7401 56.488 73.9331 56.488C72.9597 56.488 72.2207 56.373 71.7179 56.1451C71.2151 55.9171 70.8179 55.6205 70.5262 55.2554C70.2346 54.8903 70.0413 54.5085 69.9483 54.1082C69.8141 53.5151 69.7461 52.6403 69.7461 51.4819V45.9624Z"
-              <el-button
+              fill="#154DDD"
-                class="w-full mt-4"
+            />
-                size="default"
+            <path
-                type="primary"
+              d="M79.7598 56.3121V45.9645H83.0629C84.3136 45.9645 85.1295 46.0164 85.5107 46.1202C86.094 46.2759 86.5843 46.6132 86.9779 47.1322C87.3716 47.653 87.5684 48.3239 87.5684 49.1468C87.5684 49.7825 87.4557 50.3163 87.2284 50.75C87.0012 51.1837 86.7131 51.5229 86.3624 51.7694C86.0117 52.0159 85.6574 52.179 85.2959 52.2605C84.8039 52.3588 84.0935 52.4088 83.1613 52.4088H81.8193V56.3121H79.7598ZM81.8193 47.7141V50.6499H82.9448C83.7553 50.6499 84.2975 50.5962 84.5713 50.4868C84.845 50.3793 85.0598 50.2088 85.2136 49.979C85.3693 49.7492 85.4462 49.4804 85.4462 49.1746C85.4462 48.7984 85.3371 48.487 85.1188 48.2423C84.9005 47.9977 84.625 47.8439 84.2921 47.7827C84.047 47.7364 83.5531 47.7123 82.8106 47.7123H81.8193V47.7141Z"
-                :loading="loading"
+              fill="#154DDD"
-                @click="onLogin(ruleFormRef)"
+            />
-              >
+            <path
-                {{ t("login.login") }}
+              d="M88.9736 56.3121V45.9645H96.5318V47.716H91.0314V50.0105H96.1488V51.7546H91.0314V54.5717H96.7268V56.3158H88.9736V56.3121Z"
-              </el-button>
+              fill="#154DDD"
-            </Motion>
+            />
-          </el-form>
+            <path
+              d="M98.1943 56.3121V45.9645H102.526C103.616 45.9645 104.407 46.0572 104.901 46.2425C105.395 46.4279 105.79 46.7596 106.085 47.2341C106.381 47.7086 106.531 48.2535 106.531 48.8651C106.531 49.6417 106.305 50.2829 105.856 50.7889C105.407 51.2949 104.734 51.6137 103.84 51.7453C104.285 52.0085 104.652 52.2976 104.942 52.6127C105.232 52.9278 105.622 53.4875 106.114 54.2919L107.359 56.3102H104.897L103.408 54.0584C102.881 53.254 102.519 52.7461 102.324 52.5367C102.129 52.3273 101.923 52.1845 101.705 52.1067C101.487 52.0289 101.141 51.9899 100.669 51.9899H100.252V56.3102H98.1943V56.3121ZM100.254 50.3404H101.777C102.764 50.3404 103.38 50.2978 103.627 50.2125C103.874 50.1273 104.065 49.9827 104.203 49.7751C104.341 49.5675 104.412 49.3099 104.412 48.9985C104.412 48.6501 104.321 48.3684 104.137 48.1552C103.952 47.9421 103.695 47.8049 103.362 47.7493C103.196 47.7252 102.694 47.7141 101.861 47.7141H100.254V50.3404Z"
+              fill="#154DDD"
+            />
+            <path
+              d="M110.53 56.3121L106.887 45.9645H109.118L111.698 53.6228L114.194 45.9645H116.377L112.727 56.3121H110.53Z"
+              fill="#154DDD"
+            />
+            <path
+              d="M117.079 56.3121V45.9645H119.137V56.3121H117.079Z"
+              fill="#154DDD"
+            />
+            <path
+              d="M120.294 52.9445L122.296 52.7461C122.416 53.4282 122.661 53.9305 123.03 54.2493C123.398 54.5699 123.896 54.7293 124.522 54.7293C125.184 54.7293 125.683 54.5866 126.02 54.303C126.356 54.0176 126.524 53.6858 126.524 53.304C126.524 53.0594 126.453 52.8518 126.311 52.6794C126.17 52.5071 125.923 52.3588 125.571 52.2309C125.329 52.1456 124.78 51.9955 123.923 51.7787C122.819 51.5007 122.046 51.1596 121.6 50.7556C120.974 50.1866 120.661 49.4916 120.661 48.6723C120.661 48.146 120.807 47.653 121.103 47.1933C121.396 46.7337 121.82 46.3852 122.375 46.1443C122.928 45.9052 123.597 45.7847 124.381 45.7847C125.66 45.7847 126.623 46.0702 127.271 46.6391C127.916 47.2081 128.256 47.968 128.289 48.9188L126.231 49.0115C126.143 48.4796 125.954 48.0978 125.664 47.8643C125.374 47.6307 124.939 47.5158 124.359 47.5158C123.762 47.5158 123.293 47.64 122.955 47.8902C122.736 48.0496 122.627 48.2646 122.627 48.5333C122.627 48.778 122.729 48.9874 122.933 49.1616C123.193 49.3822 123.823 49.6139 124.825 49.853C125.827 50.0921 126.566 50.3404 127.047 50.598C127.528 50.8557 127.902 51.206 128.172 51.6489C128.444 52.0937 128.579 52.6424 128.579 53.2966C128.579 53.8897 128.416 54.4457 128.092 54.9628C127.768 55.4799 127.308 55.8654 126.716 56.1175C126.122 56.3696 125.383 56.4956 124.497 56.4956C123.209 56.4956 122.219 56.1935 121.529 55.5893C120.84 54.9832 120.428 54.1028 120.294 52.9445Z"
+              fill="#154DDD"
+            />
+            <path
+              d="M129.965 56.3121V45.9645H132.023V56.3121H129.965Z"
+              fill="#154DDD"
+            />
+            <path
+              d="M133.282 51.2004C133.282 50.1458 133.438 49.2617 133.747 48.5463C133.978 48.0199 134.295 47.5455 134.696 47.1266C135.097 46.7077 135.537 46.3964 136.013 46.1943C136.648 45.9219 137.38 45.7847 138.21 45.7847C139.711 45.7847 140.914 46.2573 141.816 47.2044C142.717 48.1497 143.168 49.4656 143.168 51.1504C143.168 52.8203 142.721 54.1288 141.826 55.0722C140.932 56.0156 139.735 56.4882 138.239 56.4882C136.723 56.4882 135.517 56.0193 134.622 55.0796C133.73 54.1418 133.282 52.8481 133.282 51.2004ZM135.403 51.13C135.403 52.3013 135.669 53.191 136.202 53.7952C136.736 54.3994 137.412 54.7015 138.233 54.7015C139.055 54.7015 139.727 54.4012 140.253 53.8007C140.78 53.2002 141.043 52.3013 141.043 51.1003C141.043 49.9141 140.787 49.03 140.275 48.4462C139.763 47.8624 139.083 47.5714 138.233 47.5714C137.385 47.5714 136.702 47.8661 136.183 48.4573C135.662 49.0486 135.403 49.9401 135.403 51.13Z"
+              fill="#154DDD"
+            />
+            <path
+              d="M144.512 56.3121V45.9645H146.514L150.687 52.8759V45.9645H152.599V56.3121H150.535L146.425 49.5638V56.3121H144.512Z"
+              fill="#154DDD"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="flex items-center justify-center login_body">
+        <div class="text-center loginLeft">
+          <h2>苏胜天AI配置基础平台</h2>
+          <!-- <component :is="toRaw(illustration)" /> -->
+        </div>
+        <div class="login-box">
+          <div class="login-form">
+            <!-- <avatar class="avatar" /> -->
+            <h2 class="hf-1">欢迎登录</h2>
+
+            <el-form
+              ref="ruleFormRef"
+              :model="ruleForm"
+              :rules="loginRules"
+              size="large"
+            >
+              <Motion :delay="100">
+                <el-form-item
+                  :rules="[
+                    {
+                      required: true,
+                      message: transformI18n($t('login.usernameReg')),
+                      trigger: 'blur'
+                    }
+                  ]"
+                  prop="username"
+                >
+                  <el-input
+                    clearable
+                    v-model="ruleForm.username"
+                    :placeholder="t('login.username')"
+                    :prefix-icon="useRenderIcon(User)"
+                  />
+                </el-form-item>
+              </Motion>
+
+              <Motion :delay="150">
+                <el-form-item prop="password">
+                  <el-input
+                    clearable
+                    show-password
+                    v-model="ruleForm.password"
+                    :placeholder="t('login.password')"
+                    :prefix-icon="useRenderIcon(Lock)"
+                  />
+                </el-form-item>
+              </Motion>
+
+              <Motion :delay="250">
+                <el-button
+                  class="w-full mt-4"
+                  size="default"
+                  type="primary"
+                  :loading="loading"
+                  @click="onLogin(ruleFormRef)"
+                >
+                  {{ t("login.login") }}
+                </el-button>
+              </Motion>
+            </el-form>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-@import url("@/style/login.css");
-</style>
-
 <style lang="scss" scoped>
 :deep(.el-input-group__append, .el-input-group__prepend) {
   padding: 0;
 }
-
-.translation {
-  ::v-deep(.el-dropdown-menu__item) {
-    padding: 5px 40px;
-  }
-
-  .check-zh {
-    position: absolute;
-    left: 20px;
-  }
-
-  .check-en {
-    position: absolute;
-    left: 20px;
-  }
-}
 </style>

src/views/login/index0.vue

@@ -86,7 +86,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="select-none">
     <img :src="bg" class="wave" />
-    <div class="flex-c absolute right-5 top-3">
+    <div class="absolute flex-c right-5 top-3">
       <!-- 主题 -->
       <el-switch
         v-model="dataTheme"
@@ -195,10 +195,6 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style scoped>
-@import url("@/style/login.css");
-</style>
-
 <style lang="scss" scoped>
 :deep(.el-input-group__append, .el-input-group__prepend) {
   padding: 0;

src/views/login/login.scss

@@ -7,4 +7,78 @@
   top: 0;
   background: url("@/assets/login/sst.png") no-repeat 0 0;
   background-size: cover;
+
+  .login-container {
+    // width: calc(100vw - 240px);
+    width: calc(704px + 496px);
+    margin: 0 auto;
+    height: 100vh;
+  }
+
+  .login_body {
+    padding: 48px 0;
+  }
+
+  .loginLeft {
+    // position: relative;
+    width: 704px;
+    height: 566px;
+    background-image: url("@/assets/login/loginBoxLeft.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    border-radius: 16px 0px 0px 16px;
+
+    h2 {
+      padding-top: 60px;
+      color: #fff;
+      // font-family: "HarmonyOS Sans";
+      font-size: 40px;
+      font-weight: 700;
+      line-height: normal;
+    }
+  }
+
+  .login-box {
+    // width: calc(100vw - 704px - 240px);
+    width: 496px;
+    height: 566px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    background-color: white;
+    border-radius: 0px 16px 16px 0px;
+  }
+
+  .login-form {
+    width: 360px;
+    margin: 0 auto;
+  }
+
+  .avatar {
+    width: 350px;
+    height: 80px;
+  }
+
+  .login-form h2 {
+    text-transform: uppercase;
+    margin: 32px 0;
+    font-size: 32px;
+    font-weight: 400;
+  }
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
 }

src/views/workbench/components/Notify.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-11 14:27:58
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-18 17:01:35
+ * @LastEditTime: 2024-01-24 11:31:56
  * @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\Notify.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -52,7 +52,7 @@ function fetchNoticeList(readStatus = 1) {
     status: 1
   });
   return arr;
-  // for (let i = 0; i < 2; i++) {
+  // for (let i = 0; i < 3; i++) {
   //   arr.push({
   //     title: "系统消息" + (readStatus + i),
   //     dateTime: "今天10:03:00",
@@ -86,7 +86,7 @@ const noticeData = ref<Record<string, any>[]>([
         :label="item.label"
         :name="index + ''"
       >
-        <ul class="px-[20px]">
+        <ul class="px-[20px] h-[195px] overflow-y-auto">
           <li v-for="(v, k) in item.list" :key="k" style="margin-bottom: 12px">
             <div class="flex items-center justify-between">
               <span class="font-bold" style="line-height: 22px">{{

src/views/workbench/components/chart/pie.vue

@@ -54,7 +54,44 @@ setOptions(
       {
         type: "pie",
         radius: ["30%", "50%"], // 设置内半径和外半径，达到高低不一样的效果
-        color: ["#1D39EF", "#F58702"],
+        color: [
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0.4,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#F9AC28" // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#F58400" // 100% 处的颜色
+              }
+            ],
+            globalCoord: false // 缺省为 false
+          },
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0.4,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#2C48FF" // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#001BCF" // 100% 处的颜色
+              }
+            ],
+            globalCoord: false // 缺省为 false
+          }
+        ],
         // depth: 30,
         labelLine: {
           // type: "dashed",
@@ -82,7 +119,7 @@ setOptions(
           },
           rich: {
             red: {
-              backgroundColor: "#1D39EF",
+              backgroundColor: "#F58400",
               // width: 79,
               height: 24,
               padding: [5, 8], // 调整背景边界大小
@@ -90,7 +127,7 @@ setOptions(
               color: "#fff"
             },
             blue: {
-              backgroundColor: "#F58702",
+              backgroundColor: "#1D39EF",
               // width: 79,
               height: 24,
               padding: [5, 8], // 调整背景边界大小

src/views/workbench/index.vue

@@ -11,6 +11,9 @@ defineOptions({
   name: "Workbench"
 });
 
+/**styles */
+const headStyles: string = "inline-block mb-3 text-base font-bold";
+
 /** 分析概览 */
 // const barChartData = [
 //   {
@@ -38,28 +41,33 @@ const dataViewList = [
     value: "110200",
     color: "#FF861A",
     bgColor: "#FFE9D6",
-    icon: "icon-suanlipeizhi"
+    bigBgColor: "#FFFAF5",
+    icon: "icon-yichangzongliang1"
   },
   {
     label: "设备总量",
     value: "46700",
     color: "#5786FF",
     bgColor: "#D6E0FF",
-    icon: "icon-suanlipeizhi"
+    bigBgColor: "#F5F8FF",
+    icon: "icon-shebeizongliang1"
   },
   {
     label: "覆盖车间",
     value: "40",
     color: "#5024FE",
     bgColor: "#DDD5FD",
-    icon: "icon-suanlipeizhi"
+    bigBgColor: "#F5F3FD",
+    icon: "icon-fugaichejian"
   },
   {
     label: "资源使用",
     value: "89300",
     color: "#14A1FF",
     bgColor: "#D6EFFF",
-    icon: "icon-suanlipeizhi"
+    bigBgColor: "#F5FBFF",
+
+    icon: "icon-ziyuanshiyong1"
   }
 ];
 </script>
@@ -92,9 +100,7 @@ const dataViewList = [
           </div>
         </el-card>
       </re-col>
-
       <!-- up -->
-
       <re-col
         v-motion
         class="mb-[18px]"
@@ -114,13 +120,20 @@ const dataViewList = [
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">数据总览</span>
+        <span :class="headStyles">数据总览</span>
 
         <ul class="flex justify-between flex-wrap h-[252px] dataView_box">
           <!-- <pieChart /> -->
           <li v-for="(v, k) in dataViewList" :key="k" class="w-1/2">
-            <el-card class="line-card" shadow="always">
+            <el-card
-              <div class="flex items-center justify-center h-[77px]">
+              class="line-card"
+              shadow="always"
+              :body-style="{
+                backgroundColor: v.bigBgColor,
+                padding: '20px 16px'
+              }"
+            >
+              <div class="flex items-center h-[77px]">
                 <div
                   class="flex items-center justify-center"
                   style="width: 48px; height: 48px; border-radius: 50%"
@@ -129,7 +142,7 @@ const dataViewList = [
                   <i
                     class="iconfont"
                     :class="v.icon"
-                    style="font-size: 28px"
+                    style="font-size: 24px"
                     :style="{ color: v.color }"
                   />
                 </div>
@@ -161,7 +174,7 @@ const dataViewList = [
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">设备状态</span>
+        <span :class="headStyles">设备状态</span>
         <el-card
           class="line-card"
           shadow="always"
@@ -189,7 +202,7 @@ const dataViewList = [
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">设备告警情况</span>
+        <span :class="headStyles">设备告警情况</span>
         <el-card
           class="line-card"
           shadow="always"
@@ -220,7 +233,7 @@ const dataViewList = [
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">违规总量</span>
+        <span :class="headStyles">违规总量</span>
         <el-card
           class="line-card"
           shadow="always"
@@ -250,7 +263,7 @@ const dataViewList = [
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">算力占用</span>
+        <span :class="headStyles">算力占用</span>
         <el-card
           class="line-card"
           shadow="always"
@@ -280,7 +293,7 @@ const dataViewList = [
           }
         }"
       >
-        <span class="inline-block mb-3 text-base">消息通知</span>
+        <span :class="headStyles">消息通知</span>
         <el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
           <div class="flex justify-between h-[297px]">
             <Notify />