nubomed-ui 1.0.2 → 1.0.3

package/src/demos/Icons.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">图标 - 常用</span>
+    </div>
+    <div class="demo-box-content">
+      <ul>
+        <li><nb-icon icon="connect" /><span>connect</span></li>
+        <li><nb-icon icon="connect-error" /><span>connect-error</span></li>
+        <li><nb-icon icon="wifi-online" /><span>wifi-online</span></li>
+        <li><nb-icon icon="wifi-offline" /><span>wifi-offline</span></li>
+        <li><nb-icon icon="network-4G" /><span>network-4G</span></li>
+        <li><nb-icon icon="network-5G" /><span>network-5G</span></li>
+        <li><nb-icon icon="network-null" /><span>network-null</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="back" /><span>back</span></li>
+        <li><nb-icon icon="logout" /><span>logout</span></li>
+        <li><nb-icon icon="go-filled" /><span>go-filled</span></li>
+        <li><nb-icon icon="loading" /><span>loading</span></li>
+        <li><nb-icon icon="refresh" /><span>refresh</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="door-closed" /><span>door-closed</span></li>
+        <li><nb-icon icon="door-opened" /><span>door-opened</span></li>
+        <li><nb-icon icon="lock" /><span>lock</span></li>
+        <li><nb-icon icon="unlock" /><span>unlock</span></li>
+        <li><nb-icon icon="unlock-filled" /><span>unlock-filled</span></li>
+        <li><nb-icon icon="lock-filled-bottom" /><span>lock-filled-bottom</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="delete" /><span>delete</span></li>
+        <li><nb-icon icon="delete-filled" /><span>delete-filled</span></li>
+        <li><nb-icon icon="nail" /><span>nail</span></li>
+        <li><nb-icon icon="nail-filled" /><span>nail-filled</span></li>
+        <li><nb-icon icon="print" /><span>print</span></li>
+        <li><nb-icon icon="print-filled" /><span>print-filled</span></li>
+        <li><nb-icon icon="copy" /><span>copy</span></li>
+        <li><nb-icon icon="shutdown" /><span>shutdown</span></li>
+        <li><nb-icon icon="recovery" /><span>recovery</span></li>
+
+        <li><nb-icon icon="drug" /><span>drug</span></li>
+        <li><nb-icon icon="syringe" /><span>syringe</span></li>
+        <li><nb-icon icon="single-branch" /><span>single-branch</span></li>
+
+        <li><nb-icon icon="split" /><span>split</span></li>
+        <li><nb-icon icon="note" /><span>note</span></li>
+        <li><nb-icon icon="warning-filled" /><span>warning-filled</span></li>
+        <li><nb-icon icon="voice-no-filled" /><span>voice-no-filled</span></li>
+        <li><nb-icon icon="voice-filled" /><span>voice-filled</span></li>
+        <li><nb-icon icon="relate" /><span>relate</span></li>
+        <li><nb-icon icon="anesthesiologist" /><span>anesthesiologist</span></li>
+        <li><nb-icon icon="stop" /><span>stop</span></li>
+        <li><nb-icon icon="clear-filled" /><span>clear-filled</span></li>
+        <li><nb-icon icon="rfid" /><span>rfid</span></li>
+        <li><nb-icon icon="bell-filled" /><span>bell-filled</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="battery-low" /><span>battery-low</span></li>
+        <li><nb-icon icon="battery-full" /><span>battery-full</span></li>
+        <li><nb-icon icon="battery-null" /><span>battery-null</span></li>
+        <li><nb-icon icon="battery-charging" /><span>battery-charging</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">图标 - 箭头</span>
+    </div>
+    <div class="demo-box-content">
+      <ul>
+        <li><nb-icon icon="arrow-left" /><span>arrow-left</span></li>
+        <li><nb-icon icon="arrow-right" /><span>arrow-right</span></li>
+        <li><nb-icon icon="arrow-down" /><span>arrow-down</span></li>
+        <li><nb-icon icon="arrow-down" /><span>arrow-down</span></li>
+
+        <li><nb-icon icon="caret-up" /><span>caret-up</span></li>
+        <li><nb-icon icon="caret-up-expand" /><span>caret-up-expand</span></li>
+        <li><nb-icon icon="caret-down" /><span>caret-down</span></li>
+        <li><nb-icon icon="caret-down-expand" /><span>caret-down-expand</span></li>
+        <li><nb-icon icon="caret-right" /><span>caret-right</span></li>
+        <li><nb-icon icon="caret-right-expand" /><span>caret-right-expand</span></li>
+        <li><nb-icon icon="caret-left-expand" /><span>caret-left-expand</span></li>
+
+        <li><nb-icon icon="square-left" /><span>square-left</span></li>
+        <li><nb-icon icon="square-down" /><span>square-down</span></li>
+        <li><nb-icon icon="double-arrow-left" /><span>double-arrow-left</span></li>
+        <li><nb-icon icon="double-arrow-right" /><span>double-arrow-right</span></li>
+
+        <li><nb-icon icon="center-alignment" /><span>center-alignment</span></li>
+        <li><nb-icon icon="right-alignment" /><span>right-alignment</span></li>
+        <li><nb-icon icon="left-alignment" /><span>left-alignment</span></li>
+        <li><nb-icon icon="double-caret" /><span>double-caret</span></li>
+        <li><nb-icon icon="sort-down" /><span>sort-down</span></li>
+        <li><nb-icon icon="switch" /><span>switch</span></li>
+        <li><nb-icon icon="switch-square-filled" /><span>switch-square-filled</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">图标 - 温湿度</span>
+    </div>
+    <div class="demo-box-content">
+      <ul>
+        <li><nb-icon icon="humidity" /><span>humidity</span></li>
+        <li><nb-icon icon="humidity-normal" /><span>humidity-normal</span></li>
+        <li><nb-icon icon="humidity-abnormal" /><span>humidity-abnormal</span></li>
+        <li><nb-icon icon="temperature" /><span>temperature</span></li>
+        <li><nb-icon icon="temperature-normal" /><span>temperature-normal</span></li>
+        <li><nb-icon icon="temperature-abnormal" /><span>temperature-abnormal</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">图标 - 表单</span>
+    </div>
+    <div class="demo-box-content">
+      <ul>
+        <li><nb-icon icon="computer" /><span>computer</span></li>
+        <li><nb-icon icon="face" /><span>face</span></li>
+        <li><nb-icon icon="account" /><span>account</span></li>
+        <li><nb-icon icon="password" /><span>password</span></li>
+        <li><nb-icon icon="eye-open" /><span>eye-open</span></li>
+        <li><nb-icon icon="eye-close" /><span>eye-close</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="radio-unselected" /><span>radio-unselected</span></li>
+        <li><nb-icon icon="radio-selected" /><span>radio-selected</span></li>
+        <li><nb-icon icon="checkbox-indeterminate" /><span>checkbox-indeterminate</span></li>
+        <li><nb-icon icon="checkbox-null" /><span>checkbox-null</span></li>
+        <li><nb-icon icon="checkbox-filled" /><span>checkbox-filled</span></li>
+        <li><nb-icon icon="checkbox-checked" /><span>checkbox-checked</span></li>
+        <li><nb-icon icon="calendar" /><span>calendar</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="keyboard" /><span>keyboard</span></li>
+        <li><nb-icon icon="caps" /><span>caps</span></li>
+        <li><nb-icon icon="caps-filled" /><span>caps-filled</span></li>
+        <li><nb-icon icon="import-file-filled" /><span>import-file-filled</span></li>
+        <li><nb-icon icon="export-file-filled" /><span>export-file-filled</span></li>
+        <li><nb-icon icon="import" /><span>import</span></li>
+        <li><nb-icon icon="download" /><span>download</span></li>
+        <li><nb-icon icon="download-filled" /><span>download-filled</span></li>
+        <li><nb-icon icon="check" /><span>check</span></li>
+        <li><nb-icon icon="circle-check-filled" /><span>circle-check-filled</span></li>
+        <li><nb-icon icon="close" /><span>close</span></li>
+        <li><nb-icon icon="circle-close" /><span>circle-close</span></li>
+        <li><nb-icon icon="circle-close-filled" /><span>circle-close-filled</span></li>
+        <li><nb-icon icon="remove-filled" /><span>remove-filled</span></li>
+        <li><nb-icon icon="multiple-choice" /><span>multiple-choice</span></li>
+        <li><nb-icon icon="search" /><span>search</span></li>
+        <li><nb-icon icon="plus" /><span>plus</span></li>
+        <li><nb-icon icon="circle-plus" /><span>circle-plus</span></li>
+        <li><nb-icon icon="circle-plus-filled" /><span>circle-plus-filled</span></li>
+        <li><nb-icon icon="checked-corner-bottom" /><span>checked-corner-bottom</span></li>
+        <li><nb-icon icon="checked-corner-top" /><span>checked-corner-top</span></li>
+        <li><nb-icon icon="minus" /><span>minus</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">图标 - 性别</span>
+    </div>
+    <div class="demo-box-content">
+      <ul>
+        <li><nb-icon icon="female" /><span>female</span></li>
+        <li><nb-icon icon="female-filled" /><span>female-filled</span></li>
+        <li><nb-icon icon="male" /><span>male</span></li>
+        <li><nb-icon icon="male-filled" /><span>male-filled</span></li>
+        <li><nb-icon icon="man" /><span>man</span></li>
+        <li><nb-icon icon="man-filled" /><span>man-filled</span></li>
+        <li><nb-icon icon="women" /><span>women</span></li>
+        <li><nb-icon icon="women-filled" /><span>women-filled</span></li>
+        <li><nb-icon icon="children" /><span>children</span></li>
+        <li><nb-icon icon="children-filled" /><span>children-filled</span></li>
+        <li><nb-icon icon="children-blue" /><span>children-blue</span></li>
+        <li><nb-icon icon="unknown-sex" /><span>unknown-sex</span></li>
+        <li><nb-icon icon="unknown-sex-filled" /><span>unknown-sex-filled</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">图标 - 菜单</span>
+    </div>
+    <div class="demo-box-content">
+      <ul>
+        <li><nb-icon icon="menu-user" /><span>menu-user</span></li>
+        <li><nb-icon icon="menu-card" /><span>menu-card</span></li>
+        <li><nb-icon icon="menu-fingerprint" /><span>menu-fingerprint</span></li>
+        <li><nb-icon icon="menu-update" /><span>menu-update</span></li>
+        <li><nb-icon icon="menu-face" /><span>menu-face</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="menu-setting" /><span>menu-setting</span></li>
+        <li><nb-icon icon="menu-calibration" /><span>menu-calibration</span></li>
+        <li><nb-icon icon="menu-control" /><span>menu-control</span></li>
+        <li><nb-icon icon="menu-anti-theft" /><span>menu-anti-theft</span></li>
+        <li><nb-icon icon="menu-uv" /><span>menu-uv</span></li>
+        <li><nb-icon icon="menu-notice-setting" /><span>menu-notice-setting</span></li>
+        <li><nb-icon icon="menu-about" /><span>menu-about</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="menu-notice" /><span>menu-notice</span></li>
+        <li><nb-icon icon="menu-dull-warning" /><span>menu-dull-warning</span></li>
+        <li><nb-icon icon="menu-expiry-warning" /><span>menu-expiry-warning</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="menu-stock" /><span>menu-stock</span></li>
+        <li><nb-icon icon="menu-in-store" /><span>menu-in-store</span></li>
+        <li><nb-icon icon="menu-out-stock" /><span>menu-out-stock</span></li>
+        <li><nb-icon icon="menu-take-back" /><span>menu-take-back</span></li>
+        <li><nb-icon icon="menu-back" /><span>menu-back</span></li>
+        <li><nb-icon icon="menu-take" /><span>menu-take</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="menu-temp-hum" /><span>menu-temp-hum</span></li>
+        <li><nb-icon icon="menu-system-log" /><span>menu-system-log</span></li>
+        <li><nb-icon icon="menu-user-log" /><span>menu-user-log</span></li>
+        <li><nb-icon icon="menu-network-log" /><span>menu-network-log</span></li>
+        <li><nb-icon icon="menu-video" /><span>menu-video</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="menu-billed" /><span>menu-billed</span></li>
+        <li><nb-icon icon="menu-revoke-billing" /><span>menu-revoke-billing</span></li>
+        <li><nb-icon icon="menu-consume" /><span>menu-consume</span></li>
+        <li><nb-icon icon="menu-revoke-consume" /><span>menu-revoke-consume</span></li>
+        <li><nb-icon icon="menu-book" /><span>menu-book</span></li>
+
+        <li><nb-icon icon="menu-consumable" /><span>menu-consumable</span></li>
+        <li><nb-icon icon="menu-overdue" /><span>menu-overdue</span></li>
+        <li><nb-icon icon="menu-return-loss" /><span>menu-return-loss</span></li>
+
+        <li><nb-icon icon="menu-trace-operator" /><span>menu-trace-operator</span></li>
+        <li><nb-icon icon="menu-trace-goods" /><span>menu-trace-goods</span></li>
+        <li><nb-icon icon="menu-trace-stock" /><span>menu-trace-stock</span></li>
+
+        <li><nb-icon icon="menu-recovery" /><span>menu-recovery</span></li>
+        <li><nb-icon icon="menu-urgent-take" /><span>menu-urgent-take</span></li>
+        <li><nb-icon icon="menu-empty-bottle-recycling" /><span>menu-empty-bottle-recycling</span></li>
+        <li><nb-icon icon="menu-empty-bottle-take" /><span>menu-empty-bottle-take</span></li>
+
+        <li><nb-icon icon="menu-inventory" /><span>menu-inventory</span></li>
+        <li><nb-icon icon="menu-inventory-filled" /><span>menu-inventory-filled</span></li>
+        <li><nb-icon icon="menu-checked-filled" /><span>menu-checked-filled</span></li>
+        <li><nb-icon icon="menu-checked" /><span>menu-checked</span></li>
+
+        <li><nb-icon icon="menu-take-no-back" /><span>menu-take-no-back</span></li>
+        <li><nb-icon icon="menu-apply" /><span>menu-apply</span></li>
+        <li><nb-icon icon="menu-scrap" /><span>menu-scrap</span></li>
+        <li><nb-icon icon="menu-take-plus" /><span>menu-take-plus</span></li>
+        <li><nb-icon icon="menu-unknown" /><span>menu-unknown</span></li>
+        <li><nb-icon icon="menu-rescue" /><span>menu-rescue</span></li>
+        <li><nb-icon icon="menu-exchange" /><span>menu-exchange</span></li>
+        <li><nb-icon icon="menu-list-abnormal" /><span>menu-list-abnormal</span></li>
+        <li><nb-icon icon="menu-list-query" /><span>menu-list-query</span></li>
+        <li><nb-icon icon="menu-storeroom-receive" /><span>menu-storeroom-receive</span></li>
+        <li><nb-icon icon="menu-storeroom-check" /><span>menu-storeroom-check</span></li>
+        <li><nb-icon icon="menu-storeroom-grant" /><span>menu-storeroom-grant</span></li>
+      </ul>
+      <ul>
+        <li><nb-icon icon="menu-info" /><span>menu-info</span></li>
+        <li><nb-icon icon="menu-help" /><span>menu-help</span></li>
+        <li><nb-icon icon="menu-phone" /><span>menu-phone</span></li>
+      </ul>
+    </div>
+  </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  ul + ul {
+    margin-top: 20px;
+  }
+  ul {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    border-top: 1px solid #dcdfe6;
+    border-left: 1px solid #dcdfe6;
+    li {
+      width: 150px;
+      height: 120px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-right: 1px solid #dcdfe6;
+      border-bottom: 1px solid #dcdfe6;
+      align-items: center;
+      .nb-icon {
+        width: 40px;
+        height: 40px;
+        color: #a21313;
+      }
+      span {
+        font-size: 20px;
+        text-align: center;
+        margin-top: 5px;
+        word-break: keep-all;
+        line-height: 1;
+        height: 40px;
+      }
+    }
+  }
+}
+</style>

package/src/demos/Input.vue

@@ -0,0 +1,87 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-28 14:08:20
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-06-29 19:18:06
+ * @Description: 文本输入框
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">文本输入框：大尺寸（高度80px，宽度480px）</span>
+        <span class="demo-box-title-desc">一般用在弹窗、个人中心、登录页</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-input v-model="largeInputValue" size="large" placeholder="请输入" />
+        <nb-input v-model="largeInputValue" size="large" prefixIcon="account" placeholder="请输入账号" />
+        <nb-input
+          v-model="largeInputValue"
+          size="large"
+          prefixIcon="password"
+          placeholder="请输入密码"
+          type="password"
+          show-password
+        />
+        <nb-input v-model="largeInputValue" size="large" prefixIcon="search" placeholder="请输入" />
+        <nb-input v-model="largeInputValue" size="large" placeholder="请输入" :clearable="false">
+          <template #prefix><svg-icon icon="refresh" /></template>
+        </nb-input>
+        <nb-input v-model="largeInputValue" size="large" placeholder="请输入" disabled />
+      </div>
+      <div class="demo-box-content">
+        <div style="background-color: #181D41">
+          <nb-input
+            v-model="largeInputValue"
+            size="large"
+            prefixIcon="account"
+            placeholder="请输入账号"
+            effect="dark"
+          />
+          <nb-input
+            v-model="largeInputValue"
+            size="large"
+            prefixIcon="password"
+            placeholder="请输入密码"
+            type="password"
+            show-password
+            effect="dark"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">文本输入框：中尺寸（高度64px，宽度400px）</span>
+        <span class="demo-box-title-desc">一般用在列表筛选等</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-input v-model="largeInputValue" size="large" placeholder="请输入" />
+        <nb-input v-model="largeInputValue" size="large" prefixIcon="search" placeholder="请输入" />
+      </div>
+    </div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">文本输入框：小尺寸（高度56px，宽度240px）</span>
+        <span class="demo-box-title-desc">一般用在正文、列表内</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-input v-model="largeInputValue" size="small" placeholder="请输入" />
+        <nb-input v-model="largeInputValue" size="small" prefixIcon="search" placeholder="请输入" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const largeInputValue = ref()
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  .nb-input {
+    margin: 20px 10px;
+  }
+}
+</style>

package/src/demos/InputKeyboard.vue

@@ -0,0 +1,30 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-25 15:11:57
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 17:52:27
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">输入框键盘（宽度310px）</span>
+        <span class="demo-box-title-desc">支持数字和字母切换</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-input-keyboard @search="handleSearch" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const handleSearch = (val) => {
+  console.log('输入值', val)
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/demos/InputNumber.vue

@@ -0,0 +1,34 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-25 14:21:33
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 16:42:28
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">Input Number 数字器（宽度148px，高度48px）</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-input-number v-model="inputValue" />
+        <nb-input-number v-model="inputValue2" min="0" max="3" />
+        <nb-input-number v-model="inputValue2" color="#0066E0" />
+        <nb-input-number v-model="inputValue2" color="#E52D3E" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const inputValue = ref()
+const inputValue2 = ref(2)
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  .nb-input-number{margin: 0 30px 30px 0;}
+}
+</style>

package/src/demos/LeftMenu.vue

@@ -0,0 +1,128 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-04 20:47:56
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 15:26:19
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">侧边栏（宽度360px）</span>
+        <span class="demo-box-title-desc">支持分组</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-menu position="left" :data="menus" :active="activeMenu" @change="handleChangeMenu" />
+        <nb-menu position="left" :data="menus" :active="activeMenu" @change="handleChangeMenu">
+          <template #header>
+            <div class="user">
+              <div class="user__avatar">A</div>
+              <div class="user__name">管理员</div>
+            </div>
+          </template>
+        </nb-menu>
+        <nb-menu position="left" title="上架单号" :data="orderList" :active="activeOrder" @change="handleChangeOrder" />
+        <nb-menu position="left" :data="checkList" :active="activeCate" @change="handleChangeCate" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const menus = ref([
+  [
+    { text: "修改密码", value: '修改密码', icon: "menu-update", showArrow: true },
+    { text: "工卡绑定", value: '工卡绑定', icon: "menu-card", showArrow: true },
+    { text: "指纹绑定", value: '指纹绑定', icon: "menu-fingerprint", showArrow: true },
+    { text: "人脸绑定", value: '人脸绑定', icon: "menu-face", showArrow: true },
+    { text: "取用未归还记录", value: '取用未归还记录', icon: "menu-take-back", showArrow: true },
+  ],
+  [
+    { text: "温湿度异常", value: '温湿度异常', icon: "menu-temp-hum", badge: 999, showArrow: true },
+    {
+      text: "Abnormal Temperature and Humidity Level", value: 'Abnormal Temperature and Humidity Level',
+      icon: "menu-temp-hum",
+      badge: 999,
+      showArrow: true,
+    },
+  ],
+]);
+const activeMenu = ref('修改密码')
+const handleChangeMenu = (item) => {
+  activeMenu.value = item.value
+}
+
+// 单据
+const orderList = ref([])
+for (let i = 0; i < 5; i++) {
+  orderList.value.push({
+    text: '2023…145' + i, value: '20214522551456' + i, icon: 'menu-take-back', count: 888
+  })
+}
+const activeOrder = ref(orderList.value[0].value)
+const handleChangeOrder = (item) => {
+  activeOrder.value = item.value
+}
+
+// 检测分类
+const checkList = ref([])
+checkList.value.push({
+  text: '异常入库', value: '异常入库', icon: 'menu-in-store', count: 888, abnormal: true
+})
+checkList.value.push({
+  text: 'Abnormal Stock out', value: 'Abnormal Stock out', icon: 'menu-out-stock', count: 888, abnormal: true
+})
+checkList.value.push({
+  text: '库位调整', value: '库位调整', icon: 'menu-exchange', count: 5
+})
+for (let i = 0; i < 5; i++) {
+  checkList.value.push({
+    text: '2023…145' + i, value: '20214522551456' + i, icon: 'menu-take-back', count: 888
+  })
+}
+const activeCate = ref(checkList.value[0].value)
+const handleChangeCate = (item) => {
+  activeCate.value = item.value
+}
+
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  height: 900px;
+  display: flex;
+
+  .nb-menu {
+    margin-right: 30px;
+  }
+}
+
+.user {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  margin: 16px 0 24px;
+
+  &__avatar {
+    width: 112px;
+    height: 112px;
+    background: #00a572;
+    font-size: 50px;
+    color: #fff;
+    text-align: center;
+    line-height: 112px;
+    border-radius: 50%;
+    margin-top: 40px;
+  }
+
+  &__name {
+    font-size: 28px;
+    line-height: 42px;
+    margin-top: 16px;
+    text-align: center;
+  }
+}</style>