From 007ac1b4d35d9e27da4533b8dc404c1a78987f05 Mon Sep 17 00:00:00 2001
From: mozzie <himozzie@foxmail.com>
Date: Wed, 22 Feb 2023 17:20:03 +0800
Subject: [PATCH] feat: tooltip ui

---
 apps/server/package.json                      |   4 +-
 apps/server/view/assets/img/icon-earth.svg    |   1 +
 apps/server/view/less/var.less                |   9 +
 apps/server/view/page/_layout/nav.ejs         |   2 +-
 apps/server/view/page/_layout/scripts.ejs     |   2 +
 apps/server/view/page/_layout/styles.ejs      |   2 +-
 apps/server/view/page/home/index.ejs          |  38 +---
 apps/server/view/page/home/index.scss         |   1 -
 apps/server/view/page/home/index.ts           |   6 +-
 apps/server/view/page/login/index.ts          |   1 +
 apps/server/webpack.config.js                 |   6 +-
 packages/ui/package.json                      |   2 +-
 .../ui/src/components/Dropdown/index.scss     | 185 ++++++++++++++++++
 packages/ui/src/components/Dropdown/index.ts  |   1 +
 packages/ui/src/components/Tooltip/index.less | 146 ++++++++++++++
 packages/ui/src/components/Tooltip/index.ts   |   1 +
 packages/ui/src/index.ts                      |   3 +-
 pnpm-lock.yaml                                |  48 ++---
 18 files changed, 378 insertions(+), 80 deletions(-)
 create mode 100644 apps/server/view/assets/img/icon-earth.svg
 create mode 100644 packages/ui/src/components/Dropdown/index.scss
 create mode 100644 packages/ui/src/components/Dropdown/index.ts
 create mode 100644 packages/ui/src/components/Tooltip/index.less
 create mode 100644 packages/ui/src/components/Tooltip/index.ts

diff --git a/apps/server/package.json b/apps/server/package.json
index 4c9972c..9e0fe40 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -22,9 +22,7 @@
     "typeorm": "~0.3.0",
     "mysql2": "3.0.1",
     "dotenv": "16.0.3",
-    "axios": "0.27.2",
-    "jsonwebtoken": "9.0.0",
-    "jquery": "3.6.3"
+    "jsonwebtoken": "9.0.0"
   },
   "devDependencies": {
     "@midwayjs/cli": "^2.0.0",
diff --git a/apps/server/view/assets/img/icon-earth.svg b/apps/server/view/assets/img/icon-earth.svg
new file mode 100644
index 0000000..bd86b35
--- /dev/null
+++ b/apps/server/view/assets/img/icon-earth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M1 7.998a6.998 6.998 0 1 1 13.996 0A6.998 6.998 0 0 1 1 7.998zM7.998 2h-.05c.092.18.192.395.282.634c.243.646.464 1.592.071 2.428c-.362.77-.985.97-1.45 1.09l-.068.017c-.452.117-.64.165-.775.37c-.126.192-.104.433.04.9l.032.105c.057.182.125.398.16.602c.045.254.057.572-.103.88a1.51 1.51 0 0 1-.622.651c-.235.128-.48.177-.664.21l-.069.012c-.358.063-.54.095-.714.282c-.137.147-.222.402-.272.772c-.02.151-.032.301-.045.456l-.006.082c-.014.17-.032.364-.07.53l-.024.11a5.981 5.981 0 0 0 4.347 1.866a5.97 5.97 0 0 0 3.054-.835a3.16 3.16 0 0 1-.258-.286c-.237-.298-.544-.807-.438-1.406c.051-.287.205-.529.356-.716c.154-.19.34-.366.503-.517a40.6 40.6 0 0 1 .111-.101c.125-.115.233-.213.324-.309a1.32 1.32 0 0 0 .125-.146c.023-.033.03-.05.031-.053c.05-.167-.01-.29-.084-.347c-.055-.042-.195-.105-.446.053a8.542 8.542 0 0 1-.253.158a.985.985 0 0 1-.275.117a.534.534 0 0 1-.634-.36a.637.637 0 0 1-.028-.2a1.153 1.153 0 0 1 .016-.189c.025-.21.063-.52-.057-.982c-.097-.371-.238-.654-.382-.942a9.148 9.148 0 0 1-.196-.412c-.088-.2-.184-.46-.167-.736c.02-.32.181-.58.442-.776c.317-.238.716-.783 1.061-1.334c.165-.263.307-.51.407-.69l.023-.042A5.97 5.97 0 0 0 7.998 2zm4.037 1.561c-.102.18-.233.407-.384.648c-.339.54-.824 1.24-1.309 1.603a.244.244 0 0 0-.044.04c0 .027.01.101.084.27c.033.073.078.165.13.27c.157.314.376.755.5 1.234c.067.256.099.484.11.681c.436-.144.874-.078 1.212.183c.418.323.593.885.43 1.428c-.076.248-.25.453-.39.6c-.118.123-.26.252-.388.37l-.094.085a4.033 4.033 0 0 0-.401.41c-.106.13-.142.215-.15.262c-.03.165.051.377.236.61a2.221 2.221 0 0 0 .307.313a5.985 5.985 0 0 0 2.112-4.57c0-1.758-.756-3.34-1.961-4.437zM2 7.998a5.97 5.97 0 0 0 .787 2.973l.018-.15c.054-.405.168-.933.532-1.322c.414-.444.923-.528 1.248-.581c.032-.005.063-.01.091-.016c.174-.03.279-.058.36-.103a.515.515 0 0 0 .214-.236c.014-.027.033-.09.006-.245c-.023-.133-.067-.272-.123-.451a28.642 28.642 0 0 1-.041-.134c-.13-.425-.334-1.115.08-1.744c.361-.547.94-.686 1.314-.777l.114-.028c.398-.103.633-.2.796-.547c.212-.452.12-1.062-.102-1.65a5.381 5.381 0 0 0-.43-.88A6 6 0 0 0 2 7.998z" fill="currentColor"></path></g></svg>
\ No newline at end of file
diff --git a/apps/server/view/less/var.less b/apps/server/view/less/var.less
index 464aa78..8d10bc2 100644
--- a/apps/server/view/less/var.less
+++ b/apps/server/view/less/var.less
@@ -1,3 +1,12 @@
 // 重写bootstrap5 css variable
 :root {
+  --color-blue-primary: rgb(45, 111, 247);
+  --color-black-primary: rgb(39, 41, 48);
+  --color-yellow-light: rgb(255, 191, 0);
+  --color-yellow-dark: rgb(217, 163, 74);
+  --color-font-primary: rgb(38, 51, 59);
+  --color-font-light: rgb(124, 127, 133);
+  --color-border: rgb(225, 227, 227);
+  --padding-btn: 11px 12px 12px;
+  --radius-primary: 2px;
 }
diff --git a/apps/server/view/page/_layout/nav.ejs b/apps/server/view/page/_layout/nav.ejs
index c4b76a3..1bf09d3 100644
--- a/apps/server/view/page/_layout/nav.ejs
+++ b/apps/server/view/page/_layout/nav.ejs
@@ -1,7 +1,7 @@
 <header class="navbar container">
   <section class="navbar-section">
     <a href="/">
-      <img src="public/dev/assets/img/annotation.svg" />
+      <img src="/public/assets/img/annotation.svg" />
       <span>Backset</span>
     </a>
   </section>
diff --git a/apps/server/view/page/_layout/scripts.ejs b/apps/server/view/page/_layout/scripts.ejs
index 407c238..b375a4d 100644
--- a/apps/server/view/page/_layout/scripts.ejs
+++ b/apps/server/view/page/_layout/scripts.ejs
@@ -1,5 +1,7 @@
 <script src="public/vendors.js" crossorigin="anonymous"></script>
+
 <!-- <script src="public/chunk-lib.js" crossorigin="anonymous"></script> -->
+<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
 
 <script
   type="text/javascript"
diff --git a/apps/server/view/page/_layout/styles.ejs b/apps/server/view/page/_layout/styles.ejs
index 3c25992..d7ea4c1 100644
--- a/apps/server/view/page/_layout/styles.ejs
+++ b/apps/server/view/page/_layout/styles.ejs
@@ -1,4 +1,4 @@
-<link rel="icon" type="image/svg+xml" href="/assets/img/annotation.svg" />
+<link rel="icon" type="image/svg+xml" href="/public/assets/img/annotation.svg" />
 <!-- <link rel="stylesheet" type="text/css" href="public/assets/css/ui.min.css" /> -->
 
 <link
diff --git a/apps/server/view/page/home/index.ejs b/apps/server/view/page/home/index.ejs
index b28673d..3411bf0 100644
--- a/apps/server/view/page/home/index.ejs
+++ b/apps/server/view/page/home/index.ejs
@@ -1,47 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <%- include('../_layout/base') -%>
-    <%- include('../_layout/styles') -%>
+    <%- include('../_layout/base') -%> <%- include('../_layout/styles') -%>
     <title>home页面</title>
   </head>
   <body>
     <p>home</p>
     <a href="/signup">去 注册 页面</a>
 
-    <p class="muted">
-      Placeholder text to demonstrate some
-      <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip"
-        >inline links</a
-      >
-      with tooltips. This is now just filler, no killer. Content placed here
-      just to mimic the presence of
-      <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip"
-        >real text</a
-      >. And all that just to give you an idea of how tooltips would look when
-      used in real-world situations. So hopefully you've now seen how
-      <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too"
-        >these tooltips on links</a
-      >
-      can work in practice, once you use them on
-      <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!"
-        >your own</a
-      >
-      site or project.
-    </p>
-
     <span>当前assets: <%= assets %></span>
 
-    <editable-list
-      title="TODO"
-      list-item-0="First item on the list"
-      list-item-1="Second item on the list"
-      list-item-2="Third item on the list"
-      list-item-3="Fourth item on the list"
-      list-item-4="Fifth item on the list"
-      listItem="This will not appear"
-      add-item-text="Add new list item:"
-    ></editable-list>
+    <span class="bs-tooltip fade-right" data-bs-text="Fade right">
+      Hover me
+    </span>
+    <span class="bs-tooltip zoom-up" data-bs-text="Zoom up">Hover me</span>
 
     <%- include('../_layout/footer') -%> <%- include('../_layout/scripts') -%>
   </body>
diff --git a/apps/server/view/page/home/index.scss b/apps/server/view/page/home/index.scss
index 689e36c..e69de29 100644
--- a/apps/server/view/page/home/index.scss
+++ b/apps/server/view/page/home/index.scss
@@ -1 +0,0 @@
-@import '~bootstrap/scss/bootstrap';
\ No newline at end of file
diff --git a/apps/server/view/page/home/index.ts b/apps/server/view/page/home/index.ts
index 678ad7d..3eb539f 100644
--- a/apps/server/view/page/home/index.ts
+++ b/apps/server/view/page/home/index.ts
@@ -1,3 +1,7 @@
 import './index.less';
+import $ from 'jquery';
+import '@backset/ui/src/components/Tooltip/index.less';
 
-console.log('use ts wepack');
+$(function () {
+  console.log(1);
+});
diff --git a/apps/server/view/page/login/index.ts b/apps/server/view/page/login/index.ts
index 13930bd..1daa41c 100644
--- a/apps/server/view/page/login/index.ts
+++ b/apps/server/view/page/login/index.ts
@@ -1,5 +1,6 @@
 import './index.less';
 import { RegUtil } from '@backset/util';
+import $ from 'jquery';
 
 $(() => {
   $('#page-signup')
diff --git a/apps/server/webpack.config.js b/apps/server/webpack.config.js
index eff2b6c..ce33417 100644
--- a/apps/server/webpack.config.js
+++ b/apps/server/webpack.config.js
@@ -50,7 +50,7 @@ module.exports = {
         // lib: {
         //   test(module) {
         //     return (
-        //       module.size() > 160000 &&
+        //       module.size() > 30 * 1024 &&
         //       /node_modules[/\\]/.test(module.nameForCondition() || '')
         //     )
         //   },
@@ -137,7 +137,7 @@ module.exports = {
   externals: {
     // require("jquery") 是外部的，并且可用
     // 在全局变量 jQuery 上
-    // jquery: 'jQuery',
-    // $: 'jQuery',
+    jquery: 'jQuery',
+    $: 'jQuery'
   },
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bd73fe0..1b15d67 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -7,6 +7,6 @@
     "build": "rimraf ./dist && tsc -p ./tsconfig.build.json"
   },
   "devDependencies": {
-
+    "semantic-ui-dropdown": "2.5.0"
   }
 }
\ No newline at end of file
diff --git a/packages/ui/src/components/Dropdown/index.scss b/packages/ui/src/components/Dropdown/index.scss
new file mode 100644
index 0000000..108ddd2
--- /dev/null
+++ b/packages/ui/src/components/Dropdown/index.scss
@@ -0,0 +1,185 @@
+// Fonts
+$body-font: "Roboto";
+
+// Font Weights
+$thin: 100;
+$light: 300;
+$regular: 400;
+$semibold: 600;
+$bold: 700;
+$ultra: 800;
+
+// Colors
+$black: #000000;
+$white: #ffffff;
+
+// Material Colors
+$dark-theme: (
+  primary: rgba($black, 0.87),
+  secondary: rgba($black, 0.54),
+  disabled: rgba($black, 0.26),
+);
+$light-theme: (
+  primary: rgba($white, 1),
+  secondary: rgba($white, 0.7),
+  disabled: rgba($white, 0.3),
+);
+
+// Pen Colors
+$accent: #5380f7;
+
+// Base Setting
+$base-color: map-get($dark-theme, primary);
+$base-font-family: $body-font, sans-serif;
+$base-font-size: 14px;
+$base-font-weight: $regular;
+$base-line-height: 1.5em;
+
+// Layout Settings
+$max-width: null;
+$columns: null;
+$gutters: null;
+
+// Elevation
+@mixin elevation($level) {
+  @if $level == 1 {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  } @else if $level == 2 {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  } @else if $level == 3 {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  } @else if $level == 4 {
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  } @else if $level == 5 {
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+  }
+}
+
+/* Body */
+body {
+  background: #f5f5f5;
+  height: 100%;
+  color: $base-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  font-weight: $base-font-weight;
+  line-height: $base-line-height;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.btn {
+  outline: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  background: $accent;
+  min-width: 260px;
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba($black, 0.1);
+  box-sizing: border-box;
+  padding: 16px 20px;
+  color: $white;
+  font-size: 12px;
+  font-weight: $semibold;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  overflow: hidden;
+  cursor: pointer;
+
+  &:focus,
+  &:active {
+    .dropdown {
+      transform: translate(0, 20px);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .material-icons {
+    border-radius: 100%;
+    animation: ripple 0.6s linear infinite;
+  }
+
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: $white;
+    width: 100%;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba($black, 0.1);
+    text-align: left;
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.3s ease;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: -6px;
+      left: 20px;
+      width: 0;
+      height: 0;
+      box-shadow: 2px -2px 6px rgba($black, 0.05);
+      border-top: 6px solid $white;
+      border-right: 6px solid $white;
+      border-bottom: 6px solid transparent;
+      border-left: 6px solid transparent;
+      transform: rotate(-45deg);
+      mix-blend-mode: multiple;
+    }
+
+    li {
+      z-index: 1;
+      position: relative;
+      background: $white;
+      padding: 0 20px;
+      color: #666;
+
+      &.active {
+        color: $accent;
+      }
+
+      &:first-child {
+        border-radius: 4px 4px 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+
+        a {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    a {
+      display: block;
+      border-bottom: 1px solid rgba($black, 0.05);
+      padding: 16px 0;
+      color: inherit;
+      font-size: 10px;
+      text-decoration: none;
+    }
+  }
+}
+
+@keyframes ripple {
+  0% {
+    box-shadow: 0 0 0 0 rgba($white, 0.1), 0 0 0 20px rgba($white, 0.1),
+      0 0 0 40px rgba($white, 0.1), 0 0 0 60px rgba($white, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 20px rgba($white, 0.1), 0 0 0 40px rgba($white, 0.1),
+      0 0 0 60px rgba($white, 0.1), 0 0 0 80px rgba($white, 0);
+  }
+}
diff --git a/packages/ui/src/components/Dropdown/index.ts b/packages/ui/src/components/Dropdown/index.ts
new file mode 100644
index 0000000..0a6a9b0
--- /dev/null
+++ b/packages/ui/src/components/Dropdown/index.ts
@@ -0,0 +1 @@
+import './index.scss'
\ No newline at end of file
diff --git a/packages/ui/src/components/Tooltip/index.less b/packages/ui/src/components/Tooltip/index.less
new file mode 100644
index 0000000..f8fb2e5
--- /dev/null
+++ b/packages/ui/src/components/Tooltip/index.less
@@ -0,0 +1,146 @@
+:root {
+  --bs-bg-color: hsl(0, 0%, 20%);
+  --bs-border-color: hsl(0, 0%, 25%);
+  --bs-border-size: 1px;
+  --bs-border-radius: 5px;
+  --bs-text-color: white;
+  --bs-text-size: 1rem; /* I don't recommend putting a large size in here since it kinda relies on being small */
+  --bs-offset: 10px; /* How far outwards the tooltip goes */
+  --bs-transition-time-short: 0.1s; /* Only affects the fade out animations */
+  --bs-transition-time-long: 0.2s;
+}
+
+.bs-tooltip {
+  position: relative;
+
+  &.fade-right::before,
+  &.fade-left::before,
+  &.fade-up::before,
+  &.fade-down::before,
+  &.fold-right::before,
+  &.fold-left::before,
+  &.fold-up::before,
+  &.fold-down::before,
+  &.zoom-right::before,
+  &.zoom-left::before,
+  &.zoom-up::before,
+  &.zoom-down::before,
+  &.flip-right::before,
+  &.flip-left::before,
+  &.flip-up::before,
+  &.flip-down::before {
+    box-sizing: border-box;
+    font-family: inherit;
+    opacity: 0;
+    line-height: 1;
+    pointer-events: none;
+    position: absolute;
+    padding: 5px 10px;
+    border-radius: var(--bs-border-radius);
+    content: attr(data-bs-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    height: 30px;
+    background-color: var(--bs-bg-color);
+    border: var(--bs-border-size) solid var(--bs-border-color);
+    transition: var(--bs-transition-time-short);
+    font-size: var(--bs-text-size);
+    color: var(--bs-text-color);
+  }
+
+  /* fade out */
+
+  &.fade-right::before {
+    top: calc(50% - 15px);
+    left: 100%;
+  }
+  &.fade-right:hover::before {
+    transition: var(--bs-transition-time-long);
+    opacity: 1;
+    transform: translateX(var(--bs-offset));
+  }
+
+  &.fade-left::before {
+    top: calc(50% - 15px);
+    right: 100%;
+  }
+  &.fade-left:hover::before {
+    transition: var(--bs-transition-time-long);
+    opacity: 1;
+    transform: translateX(calc(var(--bs-offset) * -1));
+  }
+
+  &.fade-up::before {
+    top: -15px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  &.fade-up:hover::before {
+    transition: var(--bs-transition-time-long);
+    opacity: 1;
+    transform: translateY(calc(var(--bs-offset) * -1)) translate(-50%, -50%);
+  }
+
+  &.fade-down::before {
+    top: calc(100% + 15px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  &.fade-down:hover::before {
+    transition: var(--bs-transition-time-long);
+    opacity: 1;
+    transform: translateY(var(--bs-offset)) translate(-50%, -50%);
+  }
+
+  /* zoom out */
+
+  &.zoom-right::before {
+    transform: scale(0.1);
+    transform-origin: center left;
+    transition: var(--bs-transition-time-long);
+    top: calc(50% - 15px);
+    left: 100%;
+  }
+  &.zoom-right:hover::before {
+    opacity: 1;
+    transform: translateX(var(--bs-offset));
+  }
+
+  &.zoom-left::before {
+    transform: scale(0.1);
+    transform-origin: center right;
+    transition: var(--bs-transition-time-long);
+    top: calc(50% - 15px);
+    right: 100%;
+  }
+  &.zoom-left:hover::before {
+    opacity: 1;
+    transform: translateX(calc(var(--bs-offset) * -1));
+  }
+
+  &.zoom-up::before {
+    transform-origin: bottom center;
+    transition: var(--bs-transition-time-long);
+    top: -15px;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.1);
+  }
+  &.zoom-up:hover::before {
+    opacity: 1;
+    transform: translateY(calc(var(--bs-offset) * -1)) translate(-50%, -50%);
+  }
+
+  &.zoom-down::before {
+    transform-origin: top center;
+    transition: var(--bs-transition-time-long);
+    top: calc(100% + 15px);
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.1);
+  }
+  &.zoom-down:hover::before {
+    opacity: 1;
+    transform: translateY(var(--bs-offset)) translate(-50%, -50%);
+  }
+}
diff --git a/packages/ui/src/components/Tooltip/index.ts b/packages/ui/src/components/Tooltip/index.ts
new file mode 100644
index 0000000..49f7e3f
--- /dev/null
+++ b/packages/ui/src/components/Tooltip/index.ts
@@ -0,0 +1 @@
+import "./index.less";
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index a9f5562..960d4e6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,2 +1 @@
-
-export const useArticle = () => "article";
+import "./components/Tooltip";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ad094b7..3a10e6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,9 +116,7 @@ importers:
       '@types/node': '14'
       '@typescript-eslint/eslint-plugin': ^5.0.0
       '@typescript-eslint/parser': ^5.0.0
-      axios: 0.27.2
       dotenv: 16.0.3
-      jquery: 3.6.3
       jsonwebtoken: 9.0.0
       mongoose: ^6.0.7
       mwts: ^1.0.5
@@ -141,9 +139,7 @@ importers:
       '@midwayjs/validate': registry.npmmirror.com/@midwayjs/validate/3.10.10
       '@midwayjs/view-ejs': registry.npmmirror.com/@midwayjs/view-ejs/3.10.10
       '@typegoose/typegoose': registry.npmmirror.com/@typegoose/typegoose/10.1.1_mongoose@6.9.1
-      axios: registry.npmmirror.com/axios/0.27.2
       dotenv: registry.npmmirror.com/dotenv/16.0.3
-      jquery: registry.npmmirror.com/jquery/3.6.3
       jsonwebtoken: registry.npmmirror.com/jsonwebtoken/9.0.0
       mongoose: registry.npmmirror.com/mongoose/6.9.1
       mysql2: registry.npmmirror.com/mysql2/3.0.1
@@ -162,7 +158,10 @@ importers:
       typescript: registry.npmmirror.com/typescript/4.8.4
 
   packages/ui:
-    specifiers: {}
+    specifiers:
+      semantic-ui-dropdown: 2.5.0
+    devDependencies:
+      semantic-ui-dropdown: registry.npmmirror.com/semantic-ui-dropdown/2.5.0
 
   packages/util:
     specifiers: {}
@@ -3646,6 +3645,7 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz}
     name: asynckit
     version: 0.4.0
+    dev: true
 
   registry.npmmirror.com/autoprefixer/10.4.13:
     resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.13.tgz}
@@ -3678,17 +3678,6 @@ packages:
     dev: true
     optional: true
 
-  registry.npmmirror.com/axios/0.27.2:
-    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz}
-    name: axios
-    version: 0.27.2
-    dependencies:
-      follow-redirects: registry.npmmirror.com/follow-redirects/1.15.2
-      form-data: registry.npmmirror.com/form-data/4.0.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
   registry.npmmirror.com/babel-loader/8.1.0_la66t7xldg4uecmyawueag5wkm:
     resolution: {integrity: sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/babel-loader/-/babel-loader-8.1.0.tgz}
     id: registry.npmmirror.com/babel-loader/8.1.0
@@ -4195,6 +4184,7 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       delayed-stream: registry.npmmirror.com/delayed-stream/1.0.0
+    dev: true
 
   registry.npmmirror.com/commander/2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz}
@@ -4569,6 +4559,7 @@ packages:
     name: delayed-stream
     version: 1.0.0
     engines: {node: '>=0.4.0'}
+    dev: true
 
   registry.npmmirror.com/delegates/1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz}
@@ -5352,18 +5343,6 @@ packages:
     version: 1.1.0
     dev: false
 
-  registry.npmmirror.com/follow-redirects/1.15.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz}
-    name: follow-redirects
-    version: 1.15.2
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
   registry.npmmirror.com/forever-agent/0.6.1:
     resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz}
     name: forever-agent
@@ -5392,6 +5371,7 @@ packages:
       asynckit: registry.npmmirror.com/asynckit/0.4.0
       combined-stream: registry.npmmirror.com/combined-stream/1.0.8
       mime-types: registry.npmmirror.com/mime-types/2.1.35
+    dev: true
 
   registry.npmmirror.com/formidable/2.1.2:
     resolution: {integrity: sha512-CM3GuJ57US06mlpQ47YcunuUZ9jpm8Vx+P2CGt2j7HpgkKZO/DJYQ0Bobim8G6PFQmK5lOqOOdUXboU+h73A4g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/formidable/-/formidable-2.1.2.tgz}
@@ -6300,12 +6280,6 @@ packages:
       '@sideway/pinpoint': registry.npmmirror.com/@sideway/pinpoint/2.0.0
     dev: false
 
-  registry.npmmirror.com/jquery/3.6.3:
-    resolution: {integrity: sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/jquery/-/jquery-3.6.3.tgz}
-    name: jquery
-    version: 3.6.3
-    dev: false
-
   registry.npmmirror.com/js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz}
     name: js-tokens
@@ -9152,6 +9126,12 @@ packages:
       compute-scroll-into-view: registry.npmmirror.com/compute-scroll-into-view/2.0.4
     dev: false
 
+  registry.npmmirror.com/semantic-ui-dropdown/2.5.0:
+    resolution: {integrity: sha512-uM6XB9nM+8d65eLyBr/wwefeXzn+wudz2i71lDxvzP9k0LQxJ/stQwMwtp06WHQkegYpgo+HP58Q6Sfsn4W7ZQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/semantic-ui-dropdown/-/semantic-ui-dropdown-2.5.0.tgz}
+    name: semantic-ui-dropdown
+    version: 2.5.0
+    dev: true
+
   registry.npmmirror.com/semver-diff/3.1.1:
     resolution: {integrity: sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/semver-diff/-/semver-diff-3.1.1.tgz}
     name: semver-diff