nubomed-ui 1.0.2 → 1.0.3

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "nubomed-ui",
-  "version": "1.0.2",
-  "description": "",
-  "main": "nubomed-ui.es.js",
+  "private": false,
+  "version": "1.0.3",
+  "description": "NuboMed-UI",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "dev:ter": "vite --mode terminal",
+    "build:ter": "set NODE_ENV=production&& vite build --mode terminal",
+    "dev:bi": "vite --mode bi",
+    "build:bi": "set NODE_ENV=production&& vite build --mode bi"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
+  "dependencies": {
+    "sass": "^1.63.6",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "vite": "^4.3.9"
+  }
 }

package/src/App.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 16:24:35
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-09-12 20:38:26
+ * @Description: 
+-->
+<script setup>
+import demos from './docs/index.vue'
+// import demos from './bi-demos/index.vue'
+</script>
+
+<template>
+  <demos />
+</template>
+
+<style lang="scss">
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+ul, li{padding: 0;margin: 0;list-style: none;}
+p{margin: 0;}
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/bi-demos/Header.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-08-07 09:17:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-09 11:27:34
+ * @Description: 
+-->
+<template>
+  <div class="demo-box">
+    <div class="demo-box-title">
+      <span class="demo-box-title-name">标题栏</span>
+      <span class="demo-box-title-desc">高度105px</span>
+    </div>
+    <div class="demo-box-content">
+      <nb-header title="智能耗材屋运营分析" :date="['2020-03-04', '星期三', '17:52:03']"></nb-header>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  background-color: #091a32;
+  padding: 0;
+  .nb-header{margin-bottom: 30px;}
+}
+</style>

package/src/bi-demos/Table.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-08-07 09:17:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-14 15:55:09
+ * @Description: 
+-->
+<template>
+  <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">
+      <div class="table">
+        <nb-box title="报警/退损统计">
+          <nb-table :data="data">
+            <nb-table-column label="耗材名称" prop="name" min-width="300" />
+            <nb-table-column label="唯一码" prop="barcode" min-width="200" />
+            <nb-table-column label="品规" min-width="100">
+              <template>
+                <strong>表格列插槽</strong>
+              </template>
+            </nb-table-column>
+          </nb-table>
+        </nb-box>
+      </div>
+      <div class="table">
+        <nb-box title="报警/退损统计"></nb-box>
+      </div>
+      <div class="table">
+        <nb-box type="error" title="当日业务分析"></nb-box>
+      </div>
+      <div class="table">
+        <nb-box type="warning">
+          <template #title>近效期概况近效期概况</template>
+        </nb-box>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const data = ref([])
+data.value.push({
+  name: '正压静脉留置针正压静脉留置针',
+  barcode: '正压静脉留置针正压静脉留置针'
+})
+
+for (let i = 0; i < 0; i++) {
+  data.value.push({
+    name: i + '正压静脉留置针正压静脉留置针',
+    barcode: '232343423423'
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-box-content {
+  background-color: #091a32;
+  padding: 30px;
+}
+.table {
+  width: 1200px;
+  height: 640px;
+  margin-bottom: 30px;
+}
+</style>

package/src/bi-demos/index.vue

@@ -0,0 +1,132 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 19:08:22
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-12 14:33:36
+ * @Description: 
+-->
+<template>
+  <div class="demo">
+    <div class="demo-nav">
+      <div v-for="item in navList" :key="item.text">
+        <strong>{{ item.text }}</strong>
+        <span
+          v-for="item2 in item.children"
+          :key="item2.id"
+          @click="handleRef(item2.id)"
+          >{{ item2.text }}</span
+        >
+      </div>
+    </div>
+
+    <div class="demo-content">
+      <Table id="Table" />
+      <Header id="Header" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from "vue";
+import Header from "./Header.vue";
+import Table from "./Table.vue";
+
+const navList = ref([]);
+navList.value.push({
+  text: "基础组件",
+  children: [
+    { text: "标题栏", id: "Header" },
+    { text: "盒子", id: "Table" },
+    { text: "轮播", id: "Table" },
+  ],
+});
+navList.value.push({
+  text: "数据展示",
+  children: [
+    { text: "表格", id: "Table" },
+    { text: "折线图", id: "Empty" },
+    { text: "双折线图", id: "Empty" },
+    { text: "单个柱状图", id: "Steps" },
+    { text: "单个横向柱状图", id: "" },
+    { text: "双向柱状图", id: "" },
+    { text: "饼图", id: "" }
+  ],
+});
+navList.value.push({
+  text: "反馈组件",
+  children: [
+    { text: "Dialog 对话框", id: "Dialog" },
+    { text: "Loading 加载", id: "" },
+    { text: "Tost 提示", id: "Tost" },
+    { text: "Message 消息弹框", id: "" },
+  ],
+});
+
+const handleRef = (id) => {
+  nextTick(() => {
+    const returnEle = document.querySelector("#" + id); // 将要跳转区域的id
+    if (returnEle) {
+      returnEle.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest",
+      }); // true 是默认的
+    }
+  });
+};
+</script>
+
+<style lang="scss">
+.demo {
+  width: 100%;
+  height: 100%;
+  background-color: #f3f7fd;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.demo-nav {
+  padding: 10px 30px;
+  background-color: #ffffff;
+  z-index: 1;
+  box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.15);
+  div {
+    display: inline-block;
+    margin-right: 20px;
+  }
+  strong {
+    font-size: 24px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+.demo-content {
+  flex: 1;
+  overflow: hidden;
+}
+.demo-box {
+  padding: 40px;
+  background-color: #ffffff;
+  margin: 30px;
+}
+.demo-box-title {
+  border-bottom: 1px solid #cad0e0;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  .demo-box-title-name {
+    height: 76px;
+    font-size: 50px;
+    line-height: 76px;
+  }
+  .demo-box-title-desc {
+    height: 32px;
+    font-size: 24px;
+    color: #f98900;
+    line-height: 32px;
+    margin-left: 20px;
+  }
+}
+</style>

package/src/bi-packages/components/Box/index.scss

@@ -0,0 +1,86 @@
+@import "../../styles/mixin.scss";
+
+:root {
+  --nb-box-color: #3abdff;
+  --nb-box-bg-color: rgba(58, 189, 255, 0.02);
+  --nb-box-border-color: rgba(58, 189, 255, 0.22);
+
+  // error
+  --nb-box-error-color: #f35e61;
+  --nb-box-error-bg-color: rgba(243, 94, 97, 0.04);
+  --nb-box-error-border-color: rgba(243, 94, 97, 0.32);
+  // warning
+  --nb-box-warning-color: #f4b263;
+  --nb-box-warning-bg-color: rgba(244, 178, 99, 0.04);
+  --nb-box-warning-border-color: rgba(244, 178, 99, 0.32);
+}
+
+.nb-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background: var(--nb-box-bg-color);
+  border: 1px solid var(--nb-box-border-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &__title {
+    font-size: 28px;
+    line-height: 1;
+    padding: 30px;
+    display: flex;
+    align-items: center;
+    color: var(--nb-box-color);
+
+    .svg-icon,
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 6px;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &--error {
+    background: var(--nb-box-error-bg-color);
+    border: 1px solid var(--nb-box-error-border-color);
+
+    .nb-box__title {
+      color: var(--nb-box-error-color);
+    }
+  }
+
+  &--warning {
+    background: var(--nb-box-warning-bg-color);
+    border: 1px solid var(--nb-box-warning-border-color);
+
+    .nb-box__title {
+      color: var(--nb-box-warning-color);
+    }
+  }
+
+  &--corner {
+    &::before {
+      @include cornerImg("./images/corner.png");
+    }
+
+    &.nb-box--error {
+      &::before {
+        @include cornerImg("./images/corner-error.png");
+      }
+    }
+
+    &.nb-box--warning {
+      &::before {
+        @include cornerImg("./images/corner-warning.png");
+      }
+    }
+  }
+}

package/src/bi-packages/components/Box/index.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-08-07 16:50:08
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-09 11:26:50
+ * @Description: 盒子
+-->
+<template>
+  <div :class="classes">
+    <!-- 标题 -->
+    <div v-if="title || $slots.title" class="nb-box__title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <!-- 内容 -->
+    <div class="nb-box__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { createNamespace } from '../../../utils/create.js'
+defineOptions({
+  name: 'NbBox'
+})
+
+const props = defineProps({
+  // 类型
+  type: {
+    type: [String],
+    default: ''
+  },
+  // 是否显示角
+  corner: {
+    type: Boolean,
+    default: true
+  },
+  // 标题
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const [name, bem] = createNamespace('box')
+
+// 样式
+const classes = bem([props.type, { corner: props.corner }])
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/bi-packages/components/Header/index.scss

@@ -0,0 +1,50 @@
+:root {
+  --nb-header-height: 105px;
+  --nb-header-color: #3ABDFF;
+}
+
+.nb-header {
+  width: 100%;
+  height: var(--nb-header-height);
+  display: flex;
+  overflow: hidden;
+
+  &__logo {
+    width: 635px;
+    height: 100%;
+    background: url(./images/left-bg.png) no-repeat;
+    background-size: 100% 100%;
+
+    img {
+      width: 216px;
+      height: 34px;
+      margin: 28px 0 0 30px;
+    }
+  }
+
+  &__title {
+    flex: 1;
+    font-size: 40px;
+    font-family: var(--nb-font-bold-family);
+    color: var(--nb-header-color);
+    line-height: 1;
+    margin: 24px auto;
+    text-align: center;
+  }
+
+  &__right {
+    width: 635px;
+    height: 100%;
+    background: url(./images/right-bg.png) no-repeat;
+    background-size: 100% 100%;
+    padding-top: 30px;
+    text-align: right;
+
+    span {
+      margin-right: 30px;
+      font-size: 24px;
+      color: #FFFFFF;
+      line-height: 32px;
+    }
+  }
+}

package/src/bi-packages/components/Header/index.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-08-07 16:50:08
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-07 17:52:20
+ * @Description: 标题栏
+-->
+<template>
+  <div class="nb-header">
+    <div class="nb-header__logo">
+      <img v-if="logo" :src="logo" alt="" />
+      <img v-else src="./images/logo.png" alt="" />
+    </div>
+    <div v-if="title || $slots.title" class="nb-header__title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div class="nb-header__right">
+      <span v-for="(item, index) in date" :key="index">{{ item }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { createNamespace } from "../../../utils/create.js";
+defineOptions({
+  name: "NbHeader",
+});
+
+const props = defineProps({
+  // 时间
+  date: {
+    type: [String],
+    default: () => {
+      return [];
+    },
+  },
+  // logo完整路径
+  logo: {
+    type: String,
+    default: "",
+  },
+  // 标题
+  title: {
+    type: String,
+    default: "",
+  },
+});
+
+const [name, bem] = createNamespace("header");
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

package/src/bi-packages/components/Table/TableColgroup.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 15:15:27
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-07 14:44:53
+ * @Description: colgroup
+-->
+<template>
+  <colgroup>
+    <col
+      v-for="(item, index) in columns"
+      :key="item.prop"
+      :name="columnName(index)"
+      :width="item['min-width']"
+    />
+  </colgroup>
+</template>
+
+<script setup>
+defineOptions({
+  name: "NbTableColgroup",
+});
+
+const props = defineProps({
+  // 数据源
+  columns: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  // 表格索引
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+
+// 列的名称
+const columnName = (index) => {
+  return `nb-table-${props.index}_column_${index}`;
+};
+</script>