pc-component-v5/examples/App.vue

<template>
  <a-layout class="app-container">
    <a-layout-sider width="240" class="app-sider">
      <a-menu mode="inline">
        <a-menu-item key="writeEpc">
          <router-link to="/desktop/writeEpc-example">EPC发卡</router-link>
        </a-menu-item>
        <a-menu-item key="inputNumber">
          <router-link to="/desktop/input-number-example">数字输入</router-link>
        </a-menu-item>
        <a-menu-item key="date">
          <router-link to="/desktop/date-example">日期控件</router-link>
        </a-menu-item>
        <a-menu-item key="dateTime">
          <router-link to="/desktop/date-time-example">日期时间控件</router-link>
        </a-menu-item>
        <a-menu-item key="imagePreview">
          <router-link to="/desktop/image-preview-example">图片预览</router-link>
        </a-menu-item>
        <a-menu-item key="loading">
          <router-link to="/desktop/loading-example">加载中</router-link>
        </a-menu-item>
        <a-menu-item key="navbar">
          <router-link to="/desktop/navbar-example">页面导航</router-link>
        </a-menu-item>
        <a-menu-item key="pageSize">
          <router-link to="/desktop/page-size-select-example">页面大小控件</router-link>
        </a-menu-item>
        <a-menu-item key="print">
          <router-link to="/desktop/print-example">打印控件</router-link>
        </a-menu-item>
        <a-menu-item key="scanner">
          <router-link to="/desktop/scanner-example">扫描仪控件</router-link>
        </a-menu-item>
        <a-menu-item key="switches">
          <router-link to="/desktop/switches-example">开关控件</router-link>
        </a-menu-item>
        <a-menu-item key="time">
          <router-link to="/desktop/time-example">时间控件</router-link>
        </a-menu-item>
        <a-menu-item key="tree">
          <router-link to="/desktop/tree-example">树控件</router-link>
        </a-menu-item>
        <a-menu-item key="update">
          <router-link to="/desktop/update-widget-example">上传控件</router-link>
        </a-menu-item>
        <a-menu-item key="pagination">
          <router-link to="/desktop/pagination-example">分页控件</router-link>
        </a-menu-item>
        <a-menu-item key="monthlyPicker">
          <router-link to="/desktop/vue-monthly-picker-example">月份控件</router-link>
        </a-menu-item>
        <a-menu-item key="yearPicker">
          <router-link to="/desktop/year-picker-example">年份控件</router-link>
        </a-menu-item>
        <a-menu-item key="searchWidget">
          <router-link to="/desktop/search-widget-example">搜索框控件</router-link>
        </a-menu-item>
        <a-menu-item key="searchInput">
          <router-link to="/desktop/search-input-example">搜索输入框控件</router-link>
        </a-menu-item>
        <a-menu-item key="modal">
          <router-link to="/desktop/modal-example">模态框</router-link>
        </a-menu-item>
        <a-menu-item key="processReport">
          <router-link to="/desktop/process-report/123456">流程报表</router-link>
        </a-menu-item>
        <a-menu-item key="info">
          <router-link to="/desktop/info/040602">查询窗口</router-link>
        </a-menu-item>
        <a-menu-item key="docGenerator">
          <router-link to="/desktop/doc-generator-example">生单界面</router-link>
        </a-menu-item>
        <a-menu-item key="notify">
          <router-link to="/desktop/notify-example">通知</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content class="app-content">
      <router-view />
    </a-layout-content>
  </a-layout>
</template>

<script>
import { Layout, Menu } from 'ant-design-vue';

export default {
  name: 'App',
  components: {
    ALayout: Layout,
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,
    AMenu: Menu,
    AMenuItem: Menu.Item,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style>
.app-container {
  min-height: 100vh;
}

.app-sider {
  background: #fff;
  border-right: 1px solid #f0f0f0;
  overflow-y: auto;
  height: 100vh;
  position: fixed;
  left: 0;
}

.app-content {
  padding: 24px;
  min-height: 100vh;
  background: #fff;
}

:deep(.ant-menu-item) {
  margin: 0 !important;
}

:deep(.ant-menu-item a) {
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
}

:deep(.ant-menu-item-selected a) {
  color: #1890ff;
}

:deep(.ant-menu-item:hover a) {
  color: #1890ff;
}
</style>