front/src/App.vue

@@ -1,9 +1,13 @@
 <script setup>
-import {ref, shallowRef} from 'vue'
+import {reactive, ref, shallowRef} from 'vue'
+import { ThemeServiceInit, infinityTheme } from 'devui-theme';
 import HomePage from './views/HomePage.vue'
 import menjizhenItemView from './views/zl-station/menjizhenItemView.vue'
 import NotFoundPage from './views/404/notFoundPage.vue'
 
+// 使用无限主题
+ThemeServiceInit({ infinityTheme }, 'infinityTheme');
+
 // 当前激活的菜单项
 const activeMenu = ref('item1')
 
@@ -30,17 +34,24 @@ const handleMenuSelect = (key) => {
   }
 }
 
+// 面包屑导航
+const source = reactive([
+  { title: '首页', link: '/', linkType: 'routerLink', replace: true },
+  { title: 'Breadcrumb', link: 'components/breadcrumb/', noNavigation: true },
+]);
+
 </script>
 <template>
   <d-layout  style="width: 100vw; ">
     <!-- 顶栏 -->
-    <d-header style="position: fixed; width: 100%; z-index: 100;background: #fff;height: 64px;box-shadow: 0 2px 4px rgba(0,0,0,0.04);">
+    <d-header style="position: fixed; width: 100%; z-index: 100;background: #fff;height: 56px;box-shadow: 0 2px 4px rgba(0,0,0,0.04);">
 
       <span class="avatar-demo-2" style="position: relative;
       text-align: right;">
         <d-avatar name="张医生" :width="28" :height="28" class="profile"/>
         <span class="name" style="margin-left: 10px;">张医生</span>
       </span>
+      <d-breadcrumb :source="source" style="display: inline-flex;text-align: center; position: relative; overflow: hidden; width: auto; margin-left:180px" />
 
       <div style="float: right;
        text-align: right;
@@ -86,12 +97,11 @@ const handleMenuSelect = (key) => {
     <d-layout style=" margin-top: 64px; width: 100%;" > <!-- 添加顶部间距，避免被header遮挡 -->
       <!-- 侧边栏 - 添加fixed样式 -->
       <d-aside style="
-          position: fixed;
+          position: relative;
           z-index: 99;
         ">
         <d-menu
             mode="vertical"
-            style="position: relative;"
             :default-select-keys="['item1']"
             width="256px"
             @select="handleMenuSelect"
@@ -171,7 +181,6 @@ const handleMenuSelect = (key) => {
       <d-content
           style="
           padding: 16px;
-          margin-left: 256px; /* 与菜单宽度一致 */
           overflow-x: hidden; /* 禁止内容溢出 */
         ">
         <component :is="currentComponent"/>

front/src/views/HomePage.vue

@@ -64,8 +64,8 @@
               </d-row>
           </template>
         </d-card>
-        <d-card shadow="never" class="item-card container-right-card">
+        <d-card shadow="never" class="item-card container-right-card" style="height: 300px;">
-          <template #title></template>
+          <template #title>今日待办</template>
           <template #content>
 
           </template>

front/src/views/zl-station/menjizhenItemView.vue

@@ -1,27 +1,137 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue';
+// 病人候选下拉框
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const value4 = ref('');
+const items = [
+  { value: '510123456789012345', name: '张三' },
+  { value: '510123456789012346', name: '李四' },
+  { value: '510123456789012346', name: '王五' },
+  { value: '510123456789012347', name: '赵六' },
+  { value: '510123456789012348', name: '田七' },
+  { value: '510123456789012349', name: '周八' },
+  { value: '510123456789012350', name: '吴九' },
+  { value: '510123456789012351', name: '郑十' },
+  { value: '510123456789012352', name: '冯十一' },
+  { value: '510123456789012353', name: '陈十二' },
+  { value: '510123456789012354', name: '褚十三' },
+  { value: '510123456789012355', name: '卫十四' },
+  { value: '510123456789012356', name: '蒋十五' },
+  { value: '510123456789012357', name: '沈十六' },
+  { value: '510123456789012358', name: '韩十七' },
+  { value: '510123456789012359', name: '杨十八' },
+  { value: '510123456789012360', name: '朱十九' },
+  { value: '510123456789012361', name: '秦二十' },
+  { value: '510123456789012362', name: '尤二十一' },
+  { value: '510123456789012363', name: '许二十二' },
+  { value: '510123456789012364', name: '何二十三' },
+  { value: '510123456789012365', name: '吕二十四' },
+];
+const items2 = [
+  { value: '510123456789012366', name: '施二十五' },
+  { value: '510123456789012367', name: '张二十六' },
+  { value: '510123456789012368', name: '孙二十七' },
+  { value: '510123456789012369', name: '曹二十八' },
+  { value: '510123456789012370', name: '严二十九' },
+  { value: '510123456789012371', name: '华三十' },
+  { value: '510123456789012372', name: '邱三十一' },
+  { value: '510123456789012373', name: '高三十二' },
+  { value: '510123456789012374', name: '林三十三' },
+];
+const options = reactive({
+  data: items,
+});
+const options2 = reactive({
+  data: items2,
+});
+//单选框分组
+const groupFilterList1 = ref(['全天', '上午', '下午']);
+let groupFilterChoose1 = ref('全天');
 
-const count = ref(0)
+// 分割器
+const collapsed = ref(false);
+const disableBarSize = '2px';
 
-console.log(count) // { value: 0 }
+const sizeChange = (size) => {
-console.log(count.value) // 0
+  console.log(size);
-
+};
-count.value++
-console.log(count.value) // 1
 
+const id = ref('tab1');
 
 </script>
 
 <template>
 
-  <h1>Welcome to the Menjizhen Item View</h1>
 
-  <button @click="count++">
+
-    {{ count }}
+  <section>
-  </button>
+    <d-splitter style="height: 1000px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
+      <template v-slot:DSplitterPane>
+        <d-splitter-pane size="30px" minSize="30px" maxSize="50px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
+          <div class="pane-content">
+            <d-radio-group class="mb-2 patient" direction="row" v-model="groupFilterChoose1" :beforeChange="groupFilterBeforeChange">
+              <d-radio v-for="item in groupFilterList1" :key="item" :value="item">
+                {{ item }}
+              </d-radio>
+            </d-radio-group>
+            <d-select size="sm" class="mb-2 patient patient-select" v-model="value1" overview="underlined" placeholder="请选择患者" :allow-clear="true" filter @input-change="handleInput">
+              <d-option-group label="待诊病人">
+                <d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
+              </d-option-group>
+              <d-option-group label="已诊病人">
+                <d-option v-for="(item, index) in options2.data" :key="index" :value="item.value" :name="item.name"></d-option>
+              </d-option-group>
+            </d-select>
+            <d-button size="sm" class="patient">患者管理</d-button>
+          </div>
+        </d-splitter-pane>
+        <d-splitter-pane style="overflow: hidden">
+          <div class="pane-content">
+            <d-tabs v-model="id" custom-width="100px">
+              <d-tab id="tab1" title="门诊病历">
+                <p>Tab1 Content</p>
+              </d-tab>
+              <d-tab id="tab2" title="门诊诊断">
+                <p>Tab2 Content</p>
+              </d-tab>
+              <d-tab id="tab3" title="处方管理">
+                <p>Tab3 Content</p>
+              </d-tab>
+              <d-tab id="tab4" title="申请单">
+                <p>Tab4 Content</p>
+              </d-tab>
+              <d-tab id="tab5" title="历史病历">
+                <p>Tab5 Content</p>
+              </d-tab>
+            </d-tabs>
+          </div>
+        </d-splitter-pane>
+<!--        <d-splitter-pane size="150px" :resizable="false" :collapsible="true">-->
+<!--          <div class="pane-content">-->
+<!--            <h2>Bottom</h2>-->
+<!--            <div>height: 150px, resizable: false</div>-->
+<!--          </div>-->
+<!--        </d-splitter-pane>-->
+      </template>
+    </d-splitter>
+  </section>
 
 </template>
 
 <style scoped>
+.patient-select {
+  width: auto;
+}
+.patient {
+  position: relative;
+  bottom: 0;
+  margin-right: 16px;
+  float: left;
+}
 
+.pane-content {
+  padding: 0 12px;
+}
 </style>

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-devui": "^1.6.32"
+  }
+}