nubomed-ui 1.0.2 → 1.0.3

package/src/bi-packages/index.js

@@ -0,0 +1,34 @@
+/*
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 17:07:50
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-07 09:15:55
+ * @Description: 
+ */
+import './iconfont-svg/iconfont.js'
+import './fonts/font.scss'
+import './styles/var.scss'
+
+// 引入封装好的组件
+import Table from './components/Table/index.vue'
+import TableColumn from './components/TableColumn/index.vue'
+import Box from './components/Box/index.vue'
+import Header from './components/Header/index.vue'
+
+// 按需引入
+export { Table }
+export { TableColumn }
+export { Box }
+export { Header }
+
+const component = [Table, TableColumn, Box, Header]
+
+const NuboMedUIBI = {
+  install(App) {
+    component.forEach((item) => {
+      App.component(item.name, item)
+    })
+  }
+}
+
+export default NuboMedUIBI

package/src/bi-packages/styles/mixin.scss

@@ -0,0 +1,12 @@
+@mixin cornerImg($url) {
+  content: '';
+  display: block;
+  width: 32px;
+  height: 34px;
+  background: url($url) no-repeat;
+  background-size: 32px 34px;
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  z-index: 1;
+}

package/src/bi-packages/styles/var.scss

@@ -0,0 +1,11 @@
+:root {
+  // 通用
+  --nb-font-family: OPPOSans-M, OPPOSans;
+  --nb-font-bold-family: OPPOSans-B, OPPOSans;
+  --nb-font-color: #181d41;
+  --nb-font-color-2: rgba(24, 29, 65, 0.2);
+  --nb-font-color-5: rgba(24, 29, 65, 0.5);
+  --nb-font-color-7: rgba(24, 29, 65, 0.7);
+  --nb-theme-color: #0066e0;
+  --nb-abnormal-color: #EA255F;
+}

package/src/demos/ActionBar.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-24 17:24:36
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 13:47:29
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">动作栏（高度112px）</span>
+        <span class="demo-box-title-desc">通常用在检测页。</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-action-bar loading loading-text="检测中..." :fixed="false">
+          <nb-button type="primary" disabled>提交</nb-button>
+        </nb-action-bar>
+        <nb-action-bar loading :fixed="false">
+          <template #loading>
+            <span>加载中...</span>
+          </template>
+          <nb-button type="primary" disabled>确定</nb-button>
+        </nb-action-bar>
+
+        <nb-action-bar abnormal abnormal-text="检测到异常，请及时处理！" :fixed="false">
+          <nb-button type="primary" plain>重新检测</nb-button>
+          <nb-button type="primary" disabled>确定</nb-button>
+        </nb-action-bar>
+        <nb-action-bar abnormal :fixed="false">
+          <template #abnormal>
+            <span>*存在出库耗材，请放回库位！</span>
+          </template>
+          <nb-button type="primary" plain>重新检测</nb-button>
+          <nb-button type="primary" disabled>确定</nb-button>
+        </nb-action-bar>
+
+        <nb-action-bar success success-text="检测完成，共<strong>233</strong>" :fixed="false">
+          <nb-button type="primary" plain>重新检测</nb-button>
+          <nb-button type="primary">确定</nb-button>
+        </nb-action-bar>
+        <nb-action-bar success :fixed="false">
+          <template #success>
+            <span>已选择<strong>323</strong></span>
+          </template>
+          <nb-button type="primary">确定</nb-button>
+        </nb-action-bar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.nb-action-bar {
+  margin-bottom: 30px;
+}
+</style>

package/src/demos/Badge.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">Badge 徽章</span>
+        <span class="demo-box-title-desc">按钮和图标上的数字或状态标记。</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-badge value="10" />
+        <nb-badge value="8">库存预警</nb-badge>
+        <nb-badge is-dot>库存预警</nb-badge>
+        <nb-badge value="10"><nb-button type="primary" size="medium">库存预警</nb-button></nb-badge>
+        <nb-badge value="100"><nb-button type="primary" size="medium">库存预警</nb-button></nb-badge>
+        <nb-badge is-dot><nb-button type="primary" size="medium">库存预警</nb-button></nb-badge>
+        <nb-badge is-dot hidden><nb-button type="primary" size="medium">库存预警</nb-button></nb-badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.nb-badge{
+  margin: 0 30px 30px 0;
+}
+</style>

package/src/demos/Button copy.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="component">
+    <div class="component__left">
+      <div class="component__title" id="base">Button 按钮</div>
+      <div class="component__intro">常用的操作按钮</div>
+      <div class="component__detail">
+        <div class="component__detail__title">基础用法</div>
+        <div class="component__detail__intro">
+          使用 type、plain、round 和 circle 来定义按钮的样式。
+        </div>
+        <div class="component__detail__box">
+          <span class="demo-box-title-name"
+            >按钮 - 大按钮（高度80px，最小宽度480px）</span
+          >
+          <span class="demo-box-title-desc">一般用在弹窗、个人中心</span>
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" size="large">primary</nb-button>
+          <nb-button type="primary" disabled size="large"
+            >primary disabled</nb-button
+          >
+          <nb-button type="primary" loading size="large"
+            >primary loading</nb-button
+          >
+          <nb-button type="primary" plain size="large">primary plain</nb-button>
+          <nb-button type="primary" plain disabled size="large"
+            >primary plain disabled</nb-button
+          >
+          <nb-button type="primary" plain loading size="large"
+            >primary plain loading</nb-button
+          >
+
+          <nb-button type="warning" size="large">warning</nb-button>
+          <nb-button type="warning" disabled size="large"
+            >warning disabled</nb-button
+          >
+          <nb-button type="warning" loading size="large"
+            >warning loading</nb-button
+          >
+          <nb-button type="warning" plain size="large">warning plain</nb-button>
+          <nb-button type="warning" plain disabled size="large"
+            >warning plain disabled</nb-button
+          >
+          <nb-button type="warning" plain loading size="large"
+            >warning plain loading</nb-button
+          >
+
+          <nb-button size="large">default</nb-button>
+          <nb-button disabled size="large">default disabled</nb-button>
+          <nb-button loading size="large">default loading</nb-button>
+        </div>
+      </div>
+      <div class="component__detail">
+        <div class="component__detail__title">基础用法</div>
+        <div class="component__detail__intro">
+          使用 type、plain、round 和 circle 来定义按钮的样式。
+        </div>
+        <div class="component__detail__box">
+          <div class="">
+            <nb-button type="primary" disabled size="large"
+              >primary disabled</nb-button
+            >
+          </div>
+          <div class="">查看代码</div>
+          <code>
+            <nb-button type="primary" disabled size="large"
+              >primary disabled</nb-button
+            >
+          </code>
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" size="large">primary</nb-button>
+          <nb-button type="primary" disabled size="large"
+            >primary disabled</nb-button
+          >
+          <nb-button type="primary" loading size="large"
+            >primary loading</nb-button
+          >
+          <nb-button type="primary" plain size="large">primary plain</nb-button>
+          <nb-button type="primary" plain disabled size="large"
+            >primary plain disabled</nb-button
+          >
+          <nb-button type="primary" plain loading size="large"
+            >primary plain loading</nb-button
+          >
+
+          <nb-button type="warning" size="large">warning</nb-button>
+          <nb-button type="warning" disabled size="large"
+            >warning disabled</nb-button
+          >
+          <nb-button type="warning" loading size="large"
+            >warning loading</nb-button
+          >
+          <nb-button type="warning" plain size="large">warning plain</nb-button>
+          <nb-button type="warning" plain disabled size="large"
+            >warning plain disabled</nb-button
+          >
+          <nb-button type="warning" plain loading size="large"
+            >warning plain loading</nb-button
+          >
+
+          <nb-button size="large">default</nb-button>
+          <nb-button disabled size="large">default disabled</nb-button>
+          <nb-button loading size="large">default loading</nb-button>
+        </div>
+      </div>
+      <div class="demo-box">
+        <div class="demo-box-title">
+          <span class="demo-box-title-name"
+            >按钮 - 大按钮（高度80px，最小宽度根据文字自适应，最小160px）</span
+          >
+          <span class="demo-box-title-desc">一般用在登录页</span>
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" size="large" auto-width>登录</nb-button>
+          <nb-button type="info" size="large" auto-width
+            >人脸识别登录</nb-button
+          >
+        </div>
+      </div>
+      <div class="demo-box">
+        <div class="demo-box-title">
+          <span class="demo-box-title-name"
+            >按钮 - 主功能按钮（高度72px，最小宽度220px）</span
+          >
+          <span class="demo-box-title-desc"
+            >一般用在界面右下角等，比较重要业务功能按钮</span
+          >
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" size="medium">primary</nb-button>
+          <nb-button type="primary" disabled size="medium"
+            >primary disabled</nb-button
+          >
+          <nb-button type="primary" loading size="medium"
+            >primary loading</nb-button
+          >
+          <nb-button type="primary" plain size="medium"
+            >primary plain</nb-button
+          >
+          <nb-button type="primary" plain disabled size="medium"
+            >primary plain disabled</nb-button
+          >
+          <nb-button type="primary" plain loading size="medium"
+            >primary plain loading</nb-button
+          >
+
+          <nb-button type="warning" size="medium">warning</nb-button>
+          <nb-button type="warning" disabled size="medium"
+            >warning disabled</nb-button
+          >
+          <nb-button type="warning" loading size="medium"
+            >warning loading</nb-button
+          >
+          <nb-button type="warning" plain size="medium"
+            >warning plain</nb-button
+          >
+          <nb-button type="warning" plain disabled size="medium"
+            >warning plain disabled</nb-button
+          >
+          <nb-button type="warning" plain loading size="medium"
+            >warning plain loading</nb-button
+          >
+
+          <nb-button size="medium">default</nb-button>
+          <nb-button disabled size="medium">default disabled</nb-button>
+          <nb-button loading size="medium">default loading</nb-button>
+        </div>
+      </div>
+      <div class="demo-box">
+        <div class="demo-box-title">
+          <span class="demo-box-title-name"
+            >按钮 - 图标按钮（高度64px，最小宽度220px）</span
+          >
+          <span class="demo-box-title-desc"
+            >一般用在界面右上角，做刷新等整体功能按钮</span
+          >
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" size="small" svg-icon="refresh"
+            >刷新</nb-button
+          >
+          <nb-button type="primary" disabled size="small"
+            >primary disabled</nb-button
+          >
+          <nb-button type="primary" loading size="small"
+            >primary loading</nb-button
+          >
+          <nb-button type="primary" plain size="small">primary plain</nb-button>
+          <nb-button type="primary" plain disabled size="small"
+            >primary plain disabled</nb-button
+          >
+          <nb-button type="primary" plain loading size="small"
+            >primary plain loading</nb-button
+          >
+
+          <nb-button type="warning" size="small">warning</nb-button>
+          <nb-button type="warning" disabled size="small"
+            >warning disabled</nb-button
+          >
+          <nb-button type="warning" loading size="small"
+            >warning loading</nb-button
+          >
+          <nb-button type="warning" plain size="small">warning plain</nb-button>
+          <nb-button type="warning" plain disabled size="small"
+            >warning plain disabled</nb-button
+          >
+          <nb-button type="warning" plain loading size="small"
+            >warning plain loading</nb-button
+          >
+
+          <nb-button size="small">default</nb-button>
+          <nb-button disabled size="small">default disabled</nb-button>
+          <nb-button loading size="small">default loading</nb-button>
+        </div>
+      </div>
+      <div class="demo-box">
+        <div class="demo-box-title">
+          <span class="demo-box-title-name"
+            >按钮 - 正文按钮（高度48px，最小宽度88px）</span
+          >
+          <span class="demo-box-title-desc"
+            >一般用在列表内，偏小尺寸的按钮</span
+          >
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" size="mini">primary</nb-button>
+          <nb-button type="primary" disabled size="mini"
+            >primary disabled</nb-button
+          >
+          <nb-button type="primary" loading size="mini"
+            >primary loading</nb-button
+          >
+          <nb-button type="primary" plain size="mini">primary plain</nb-button>
+          <nb-button type="primary" plain disabled size="mini"
+            >primary plain disabled</nb-button
+          >
+          <nb-button type="primary" plain loading size="mini"
+            >primary plain loading</nb-button
+          >
+
+          <nb-button type="warning" size="mini">warning</nb-button>
+          <nb-button type="warning" disabled size="mini"
+            >warning disabled</nb-button
+          >
+          <nb-button type="warning" loading size="mini"
+            >warning loading</nb-button
+          >
+          <nb-button type="warning" plain size="mini">warning plain</nb-button>
+          <nb-button type="warning" plain disabled size="mini"
+            >warning plain disabled</nb-button
+          >
+          <nb-button type="warning" plain loading size="mini"
+            >warning plain loading</nb-button
+          >
+
+          <nb-button size="mini">default</nb-button>
+          <nb-button disabled size="mini">default disabled</nb-button>
+          <nb-button loading size="mini">default loading</nb-button>
+        </div>
+      </div>
+      <div class="demo-box">
+        <div class="demo-box-title">
+          <span class="demo-box-title-name"
+            >按钮 - 正文图标按钮（高度64px，最小宽度100px）</span
+          >
+          <span class="demo-box-title-desc"
+            >一般用在列表内，偏小尺寸的按钮</span
+          >
+        </div>
+        <div class="demo-box-content">
+          <nb-button type="primary" plain text svg-icon="delete"
+            >删除</nb-button
+          >
+          <nb-button type="primary" plain text disabled svg-icon="delete"
+            >删除</nb-button
+          >
+          <nb-button type="warning" plain text svg-icon="delete"
+            >删除</nb-button
+          >
+          <nb-button type="warning" plain text disabled svg-icon="delete"
+            >删除</nb-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="component__right">
+      <p>CONTENTS</p>
+      <p><a href="#base">基础用法</a></p>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  .nb-button {
+    margin: 20px 10px;
+  }
+}
+</style>

package/src/demos/Button.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-05 15:26:05
+ * @LastEditTime: 2023-09-12 21:00:34
+ * @LastEditors: chenghuan.dong
+ * @Description: 
+ * @FilePath: \基础建设\nubomed-ui\src\demos\Button.vue
+-->
+<template>
+  <div class="component">
+    <div class="component__left">
+      <div class="component__title" id="base">Button 按钮</div>
+      <div class="component__intro">常用的操作按钮</div>
+      <div class="component__detail">
+        <div class="component__detail__title">基础用法</div>
+        <div class="component__detail__intro">
+          使用 type、plain、round 和 circle 来定义按钮的样式。
+        </div>
+        <div class="component__detail__box">
+          <div class="component__detail__demo">
+            <nb-button type="primary">primary</nb-button>
+          </div>
+          <div class="component__detail__toggle">
+            <span>查看代码</span>
+          </div>
+          <div class="component__detail__code">
+            {{demo}}
+          </div>
+        </div>
+      </div>
+
+      <div class="component__title" id="api">Button API</div>
+      <div class="component__intro">Button Attributes</div>
+      <table class="table" cellpadding="0" cellspacing="0" border="0">
+        <thead>
+          <tr>
+            <th>属性名</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>size</td>
+            <td>尺寸</td>
+            <td>enum: 'large' | 'medium' | 'small' | 'mini'</td>
+            <td>medium</td>
+          </tr>
+          <tr>
+            <td>type</td>
+            <td>类型</td>
+            <td>enum: 'default', 'primary', 'warning', 'info'</td>
+            <td>'default'</td>
+          </tr>
+          <tr>
+            <td>disabled</td>
+            <td>按钮是否为禁用状态</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>loading</td>
+            <td>是否为加载中状态</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>plain</td>
+            <td>是否为朴素按钮</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>text </td>
+            <td>是否为文字按钮</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>svgIcon</td>
+            <td>svg-icon的名称</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>autoWidth</td>
+            <td>是否自适应文字显示宽度</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="component__right">
+      <p>CONTENTS</p>
+      <p><a href="#base">基础用法</a></p>
+      <p><a href="#api">API</a></p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const demo = ref(decodeURIComponent(`<nb-button type="primary">primary</nb-button>`))
+console.log(decodeURIComponent(demo))
+
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  .nb-button {
+    margin: 20px 10px;
+  }
+}
+</style>

package/src/demos/ButtonGroup.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-11 11:14:22
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-13 17:21:24
+ * @Description: 
+-->
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">多选按钮（最小宽度88px，高度64px）</span>
+        <span class="demo-box-title-desc">当前选中值：{{value}}</span>
+      </div>
+      <div class="demo-box-content">
+        <nb-button-group v-model="value" :data="options" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const options = ref([])
+for (let i = 0; i < 7; i++) {
+  options.value.push({
+    label: `星期${i + 1}`,
+    value: i
+  })
+}
+options.value.push({
+    label: `星期8`,
+    value: 8,
+    disabled: true
+  })
+const value = ref([options.value[0].value])
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/demos/Check.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-25 14:21:33
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 17:58:46
+ * @Description: 
+-->
+
+<template>
+  <div>
+    <div class="demo-box">
+      <div class="demo-box-title">
+        <span class="demo-box-title-name">检测页排版</span>
+        <span class="demo-box-title-desc"></span>
+      </div>
+      <div class="demo-box-content">
+        <nb-check-list></nb-check-list>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  height: 900px;background-color: #ECF0F5;padding: 30px;
+}
+</style>