nubomed-ui 1.0.2 → 1.0.3

package/src/demos/index.vue

@@ -0,0 +1,348 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-27 19:08:22
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-09-12 20:30:34
+ * @Description: 
+-->
+<template>
+  <div class="container">
+    <div class="container-header"></div>
+    <div class="container">
+      <div class="container-aside">
+        <div class="menu">
+          <div v-for="item in navList" :key="item.text" class="menu__group">
+            <p class="menu__group__text">{{ item.text }}</p>
+            <div
+              v-for="(child, index) in item.children"
+              :key="index"
+              class="menu__group__child"
+            >
+              {{ child.text }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="container-main">
+        <component :is="active.component"></component>
+      </div>
+    </div>
+  </div>
+  <!-- <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>
+
+    <InputKeyboard id="InputKeyboard" />
+
+    <ActionBar id="ActionBar" />
+    <Statusbar id="Statusbar" />
+    <Check id="CheckPage" />
+    <OpenCabinetBall id="OpenCabinetBall" />
+
+    <Tost id="Tost" />
+    <Dialog id="Dialog" />
+
+    <Header id="Header" />
+    <FooterMenu id="FooterMenu" />
+    <LeftMenu id="LeftMenu" />
+    <Menus id="Menus" />
+
+    <Badge id="Badge" />
+    <Empty id="Empty" />
+    <Steps id="Steps" />
+
+    <Input id="Input" />
+    <InputNumber id="InputNumber" />
+    <ButtonGroup id="ButtonGroup" />
+
+    <Button id="Button" />
+    <Icons id="Icons" />
+  </div> -->
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import Dialog from './Dialog.vue'
+import Icons from './Icons.vue'
+import Button from './Button.vue'
+import Input from './Input.vue'
+import InputNumber from './InputNumber.vue'
+import Empty from './Empty.vue'
+import Badge from './Badge.vue'
+import LeftMenu from './LeftMenu.vue'
+import FooterMenu from './FooterMenu.vue'
+import Header from './Header.vue'
+import Statusbar from './Statusbar.vue'
+import Tost from './Tost.vue'
+import ButtonGroup from './ButtonGroup.vue'
+import Check from './Check.vue'
+import Steps from './Steps.vue'
+import InputKeyboard from './InputKeyboard.vue'
+import ActionBar from './ActionBar.vue'
+import Menus from './Menus.vue'
+import OpenCabinetBall from './OpenCabinetBall.vue'
+
+const navList = ref([])
+navList.value.push({
+  text: '基础组件',
+  children: [
+    {
+      text: '图标',
+      id: 'Icons',
+      component: Icons,
+      title: 'Button 按钮',
+      intro: '常用的操作按钮。'
+    },
+    {
+      text: '按钮',
+      id: 'Button',
+      component: Button,
+      title: 'Button 按钮',
+      intro: '常用的操作按钮。'
+    }
+  ]
+})
+navList.value.push({
+  text: '表单组件',
+  children: [
+    { text: 'Input 输入框', id: 'Input' },
+    { text: 'Input Number 数字器', id: 'InputNumber' },
+    { text: '多选按钮', id: 'ButtonGroup' },
+    { text: '下拉框', id: '' },
+    { text: '开关', id: '' },
+    { text: '日期选择器', id: '' },
+    { text: '时间选择器', id: '' }
+  ]
+})
+navList.value.push({
+  text: '数据展示',
+  children: [
+    { text: 'Badge 徽章', id: 'Badge' },
+    { text: 'Empty 空状态', id: 'Empty' },
+    { text: 'Steps 步骤条', id: 'Steps' },
+    { text: '走马灯', id: '' },
+    { text: '分页', id: '' },
+    { text: '进度条', id: '' },
+    { text: '表格', id: '' },
+    { text: '时间线', id: '' }
+  ]
+})
+navList.value.push({
+  text: '导航',
+  children: [
+    { text: '标题栏', id: 'Header' },
+    { text: '底部导航', id: 'FooterMenu' },
+    { text: '侧边栏', id: 'LeftMenu' },
+    { text: '宫格菜单', id: 'Menus' },
+    { text: '下拉菜单', id: '' }
+  ]
+})
+navList.value.push({
+  text: '反馈组件',
+  children: [
+    { text: 'Dialog 对话框', id: 'Dialog' },
+    { text: 'Loading 加载', id: '' },
+    { text: 'Tost 提示', id: 'Tost' },
+    { text: 'Message 消息弹框', id: '' },
+    { text: 'Popover 气泡卡片', id: '' },
+    { text: 'Tooltip 文字提示', id: '' }
+  ]
+})
+
+navList.value.push({
+  text: '键盘',
+  children: [
+    { text: '输入框键盘', id: 'InputKeyboard' },
+    { text: '通用键盘', id: '' }
+  ]
+})
+
+navList.value.push({
+  text: '业务组件',
+  children: [
+    { text: '状态栏', id: 'Statusbar' },
+    { text: '动作栏', id: 'ActionBar' },
+    { text: '检测页', id: 'CheckPage' },
+    { text: '开柜浮球', id: 'OpenCabinetBall' }
+  ]
+})
+
+const active = ref(navList.value[0].children[1])
+
+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">
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .container-header {
+    height: 60px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  .container {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    .container-aside {
+      width: 200px;
+      height: 100%;
+      overflow: auto;
+      border-right: 1px solid #dcdfe6;
+    }
+    .container-main {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+.menu {
+  margin: 0 20px;
+  &__group {
+    &__text {
+      font-size: 16px;
+      line-height: 28px;
+    }
+    &__child {
+      font-size: 14px;
+      line-height: 40px;
+      border-radius: 10px;
+      background-color: rgba(#79bbff, 0.1);
+      color: #79bbff;
+      padding: 0 15px;
+    }
+  }
+}
+
+.component {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  &__left {
+    flex: 1;
+    height: 100%;
+    overflow: auto;
+    padding: 30px;
+    box-sizing: border-box;
+  }
+  &__right {
+    width: 180px;
+    height: 100%;
+    overflow: auto;
+    padding: 30px;
+    box-sizing: border-box;
+  }
+  &__title {
+    font-size: 36px;
+    font-weight: 700;
+    line-height: 56px;
+  }
+  &__intro {
+    font-size: 14px;
+    line-height: 28px;
+  }
+  &__detail {
+    &__title {
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 36px;
+    }
+    &__intro {
+      font-size: 14px;
+      line-height: 28px;
+    }
+    &__box {
+      border: 1px solid #dcdfe6;
+      border-radius: 5px;
+    }
+    &__demo {
+      padding: 15px;
+      border-bottom: 1px solid #dcdfe6;
+    }
+    &__toggle {
+      padding: 15px;
+      border-bottom: 1px solid #dcdfe6;
+      text-align: right;
+    }
+    &__code {
+      background-color: #f0f2f5;padding: 15px;
+    }
+  }
+}
+
+.demo {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: #f3f7fd;
+  padding-top: 150px;
+}
+.demo-nav {
+  padding: 10px 30px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  min-height: 40px;
+  line-height: 40px;
+  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-box {
+  background-color: #ffffff;
+}
+.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/docs/icons/Icon.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-05 15:26:05
+ * @LastEditTime: 2023-09-12 20:29:42
+ * @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>
+
+      <table>
+        <thead>
+          <tr>
+            <th>属性名</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>size</td>
+            <td>尺寸</td>
+            <td>enum: 'large'| 'default'| 'small'</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="component__right">
+      <p>CONTENTS</p>
+      <p><a href="#base">基础用法</a></p>
+      <p><a href="#base">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/docs/icons/icon.md

@@ -0,0 +1,21 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-09-12 20:31:23
+ * @LastEditTime: 2023-09-12 20:33:48
+ * @LastEditors: chenghuan.dong
+ * @Description: 
+ * @FilePath: \基础建设\nubomed-ui\src\demos\button\button.md
+-->
+# Upload
+
+:::demo 使用type、plain、round和circle属性来定义 Button 的样式。
+
+<el-row>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success">成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+</el-row>
+:::

package/src/docs/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NuboMed-UI</title>
+  </head>
+  <body>
+    <div class="page">
+
+      
+    </div>
+  </body>
+</html>