{"ast":null,"code":"import \"core-js/modules/es.array.filter.js\";\nimport \"core-js/modules/es.array.find.js\";\nimport \"core-js/modules/es.array.includes.js\";\nimport \"core-js/modules/es.iterator.constructor.js\";\nimport \"core-js/modules/es.iterator.filter.js\";\nimport \"core-js/modules/es.iterator.find.js\";\nimport \"core-js/modules/es.object.to-string.js\";\nimport \"core-js/modules/es.string.includes.js\";\nimport \"core-js/modules/web.timers.js\";\nexport default {\n  name: 'App',\n  data: function data() {\n    return {\n      searchQuery: '',\n      showSidebar: false,\n      windowWidth: window.innerWidth,\n      showProcessTypeSelector: false,\n      selectedProcessType: 'employee',\n      menuItems: [{\n        path: '/process/employee',\n        title: '员工入职业务流程',\n        icon: 'el-icon-user',\n        showProcessSelector: true\n      }, {\n        path: '/process/shipping',\n        title: '发货业务流程',\n        icon: 'el-icon-truck',\n        showProcessSelector: true\n      }]\n    };\n  },\n  computed: {\n    currentRoute: function currentRoute() {\n      return this.$route.path;\n    },\n    filteredMenuItems: function filteredMenuItems() {\n      var _this = this;\n      return this.menuItems.filter(function (item) {\n        return item.title.toLowerCase().includes(_this.searchQuery.toLowerCase());\n      });\n    },\n    isMobile: function isMobile() {\n      return this.windowWidth < 768;\n    },\n    isEmployeeProcessActive: function isEmployeeProcessActive() {\n      return this.selectedProcessType === 'employee';\n    },\n    isShippingProcessActive: function isShippingProcessActive() {\n      return this.selectedProcessType === 'shipping';\n    }\n  },\n  methods: {\n    handleSearch: function handleSearch() {\n      // 这里可以添加额外的搜索逻辑\n    },\n    handleResize: function handleResize() {\n      this.windowWidth = window.innerWidth;\n    },\n    handleMobileMenuSelect: function handleMobileMenuSelect() {\n      var _this2 = this;\n      // 在应用选择类型变更后再关闭侧边栏\n      setTimeout(function () {\n        _this2.showSidebar = false;\n      }, 300);\n    },\n    handleMenuItemClick: function handleMenuItemClick(item) {\n      // 显示或隐藏流程类型选择器\n      this.showProcessTypeSelector = item.showProcessSelector || false;\n\n      // 根据当前路径设置默认选中的流程类型\n      if (item.path.includes('employee')) {\n        this.selectedProcessType = 'employee';\n      } else if (item.path.includes('shipping')) {\n        this.selectedProcessType = 'shipping';\n      }\n    },\n    handleProcessTypeChange: function handleProcessTypeChange(type) {\n      this.selectedProcessType = type;\n      // 通知流程组件更新流程类型\n      this.$root.$emit('change-process-type', type);\n    }\n  },\n  mounted: function mounted() {\n    window.addEventListener('resize', this.handleResize);\n\n    // 根据当前路径初始化\n    var currentPath = this.$route.path;\n    var currentItem = this.menuItems.find(function (item) {\n      return item.path === currentPath;\n    });\n    if (currentItem) {\n      this.showProcessTypeSelector = currentItem.showProcessSelector || false;\n    }\n  },\n  beforeDestroy: function beforeDestroy() {\n    window.removeEventListener('resize', this.handleResize);\n  }\n};","map":{"version":3,"names":["name","data","searchQuery","showSidebar","windowWidth","window","innerWidth","showProcessTypeSelector","selectedProcessType","menuItems","path","title","icon","showProcessSelector","computed","currentRoute","$route","filteredMenuItems","_this","filter","item","toLowerCase","includes","isMobile","isEmployeeProcessActive","isShippingProcessActive","methods","handleSearch","handleResize","handleMobileMenuSelect","_this2","setTimeout","handleMenuItemClick","handleProcessTypeChange","type","$root","$emit","mounted","addEventListener","currentPath","currentItem","find","beforeDestroy","removeEventListener"],"sources":["src/App.vue"],"sourcesContent":["<template>\n  <div id=\"app\">\n    <el-container>\n      <!-- 移动端显示的顶部栏 -->\n      <el-header v-if=\"isMobile\" class=\"mobile-header\">\n        <div class=\"mobile-header-content\">\n          <i class=\"el-icon-s-platform\" style=\"font-size: 24px; color: #409EFF;\"></i>\n          <h3 class=\"mobile-title\">业务流程管理</h3>\n          <i class=\"el-icon-s-unfold\" @click=\"showSidebar = true\"></i>\n        </div>\n      </el-header>\n      \n      <!-- 侧边栏 - 在移动端作为抽屉显示 -->\n      <el-drawer\n        v-if=\"isMobile\"\n        title=\"业务流程导航\"\n        :visible.sync=\"showSidebar\"\n        direction=\"ltr\"\n        size=\"80%\">\n        <div class=\"mobile-sidebar\">\n          <div class=\"search-container\">\n            <el-input\n              v-model=\"searchQuery\"\n              placeholder=\"搜索业务名称\"\n              prefix-icon=\"el-icon-search\"\n              clearable\n              @input=\"handleSearch\">\n            </el-input>\n          </div>\n          \n          <!-- 移动端流程类型选择器 -->\n          <div class=\"process-type-selector\" v-if=\"showProcessTypeSelector\">\n            <h4>选择流程类型</h4>\n            <el-menu class=\"process-type-menu\">\n              <el-menu-item @click=\"handleProcessTypeChange('employee')\" :class=\"{'is-active': isEmployeeProcessActive}\">\n                <i class=\"el-icon-user\"></i>\n                <span>员工入职流程</span>\n              </el-menu-item>\n              <el-menu-item @click=\"handleProcessTypeChange('shipping')\" :class=\"{'is-active': isShippingProcessActive}\">\n                <i class=\"el-icon-truck\"></i>\n                <span>发货业务流程</span>\n              </el-menu-item>\n            </el-menu>\n          </div>\n          \n          <el-menu\n            :router=\"true\"\n            :default-active=\"currentRoute\"\n            @select=\"handleMobileMenuSelect\">\n            <el-menu-item \n              v-for=\"item in filteredMenuItems\" \n              :key=\"item.path\"\n              :index=\"item.path\"\n              @click=\"handleMenuItemClick(item)\">\n              <i :class=\"item.icon\"></i>\n              <span>{{ item.title }}</span>\n            </el-menu-item>\n          </el-menu>\n        </div>\n      </el-drawer>\n      \n      <!-- 桌面端的常规侧边栏 -->\n      <el-aside v-if=\"!isMobile\" width=\"250px\">\n        <div class=\"logo-container\">\n          <!-- 使用 Element UI 图标临时替代 logo -->\n          <i class=\"el-icon-s-platform\" style=\"font-size: 40px; color: #409EFF;\"></i>\n        </div>\n        <div class=\"search-container\">\n          <el-input\n            v-model=\"searchQuery\"\n            placeholder=\"搜索业务名称\"\n            prefix-icon=\"el-icon-search\"\n            clearable\n            @input=\"handleSearch\">\n          </el-input>\n        </div>\n        \n        <!-- 流程类型选择器 -->\n        <div class=\"process-type-selector\" v-if=\"showProcessTypeSelector\">\n          <h4>选择流程类型</h4>\n          <el-menu class=\"process-type-menu\">\n            <el-menu-item @click=\"handleProcessTypeChange('employee')\" :class=\"{'is-active': isEmployeeProcessActive}\">\n              <i class=\"el-icon-user\"></i>\n              <span>员工入职流程</span>\n            </el-menu-item>\n            <el-menu-item @click=\"handleProcessTypeChange('shipping')\" :class=\"{'is-active': isShippingProcessActive}\">\n              <i class=\"el-icon-truck\"></i>\n              <span>发货业务流程</span>\n            </el-menu-item>\n          </el-menu>\n        </div>\n        \n        <el-menu\n          :router=\"true\"\n          :default-active=\"currentRoute\"\n          class=\"el-menu-vertical\">\n          <el-menu-item \n            v-for=\"item in filteredMenuItems\" \n            :key=\"item.path\"\n            :index=\"item.path\"\n            @click=\"handleMenuItemClick(item)\">\n            <i :class=\"item.icon\"></i>\n            <span>{{ item.title }}</span>\n          </el-menu-item>\n        </el-menu>\n      </el-aside>\n      <el-main>\n        <router-view></router-view>\n      </el-main>\n    </el-container>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      searchQuery: '',\n      showSidebar: false,\n      windowWidth: window.innerWidth,\n      showProcessTypeSelector: false,\n      selectedProcessType: 'employee',\n      menuItems: [\n        { \n          path: '/process/employee', \n          title: '员工入职业务流程',\n          icon: 'el-icon-user',\n          showProcessSelector: true\n        },\n        { \n          path: '/process/shipping', \n          title: '发货业务流程',\n          icon: 'el-icon-truck',\n          showProcessSelector: true\n        }\n      ]\n    }\n  },\n  computed: {\n    currentRoute() {\n      return this.$route.path\n    },\n    filteredMenuItems() {\n      return this.menuItems.filter(item => \n        item.title.toLowerCase().includes(this.searchQuery.toLowerCase())\n      )\n    },\n    isMobile() {\n      return this.windowWidth < 768\n    },\n    isEmployeeProcessActive() {\n      return this.selectedProcessType === 'employee'\n    },\n    isShippingProcessActive() {\n      return this.selectedProcessType === 'shipping'\n    }\n  },\n  methods: {\n    handleSearch() {\n      // 这里可以添加额外的搜索逻辑\n    },\n    handleResize() {\n      this.windowWidth = window.innerWidth\n    },\n    handleMobileMenuSelect() {\n      // 在应用选择类型变更后再关闭侧边栏\n      setTimeout(() => {\n        this.showSidebar = false;\n      }, 300);\n    },\n    handleMenuItemClick(item) {\n      // 显示或隐藏流程类型选择器\n      this.showProcessTypeSelector = item.showProcessSelector || false\n      \n      // 根据当前路径设置默认选中的流程类型\n      if (item.path.includes('employee')) {\n        this.selectedProcessType = 'employee'\n      } else if (item.path.includes('shipping')) {\n        this.selectedProcessType = 'shipping'\n      }\n    },\n    handleProcessTypeChange(type) {\n      this.selectedProcessType = type\n      // 通知流程组件更新流程类型\n      this.$root.$emit('change-process-type', type)\n    }\n  },\n  mounted() {\n    window.addEventListener('resize', this.handleResize)\n    \n    // 根据当前路径初始化\n    const currentPath = this.$route.path\n    const currentItem = this.menuItems.find(item => item.path === currentPath)\n    if (currentItem) {\n      this.showProcessTypeSelector = currentItem.showProcessSelector || false\n    }\n  },\n  beforeDestroy() {\n    window.removeEventListener('resize', this.handleResize)\n  }\n}\n</script>\n\n<style>\n#app {\n  font-family: Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  height: 100vh;\n}\n\n.el-container {\n  height: 100%;\n}\n\n.el-aside {\n  background-color: #f8f9fa;\n  border-right: 1px solid #e9ecef;\n}\n\n.logo-container {\n  padding: 20px;\n  text-align: center;\n}\n\n.search-container {\n  padding: 0 20px 20px 20px;\n}\n\n/* 流程类型选择器样式 */\n.process-type-selector {\n  margin: 0 20px 20px;\n  padding: 10px 0;\n  background-color: transparent;\n  border-radius: 0;\n  box-shadow: none;\n  transition: all 0.3s ease;\n  border-bottom: 1px solid #e9ecef;\n}\n\n.process-type-selector h4 {\n  margin-top: 0;\n  margin-bottom: 12px;\n  color: #909399;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 0 20px;\n}\n\n.process-type-menu {\n  border-right: none;\n}\n\n.process-type-menu .el-menu-item {\n  height: 56px;\n  line-height: 56px;\n  font-size: 16px;\n}\n\n.process-type-menu .el-menu-item i {\n  margin-right: 5px;\n  font-size: 18px;\n}\n\n.process-type-menu .el-menu-item:hover {\n  background-color: #f2f6fc;\n}\n\n.process-type-menu .el-menu-item.is-active {\n  color: #409EFF;\n  background-color: #ecf5ff;\n  border-left: 3px solid #409EFF;\n}\n\n.el-menu-vertical {\n  border-right: none;\n}\n\n.el-main {\n  padding: 20px;\n  background-color: #fff;\n  overflow-x: auto;\n}\n\n.el-menu-item {\n  font-size: 16px;\n}\n\n.el-menu-item i {\n  margin-right: 5px;\n  font-size: 18px;\n}\n\n/* 移动端样式 */\n.mobile-header {\n  background-color: #fff;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  padding: 0;\n}\n\n.mobile-header-content {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 15px;\n}\n\n.mobile-title {\n  margin: 0;\n  font-size: 18px;\n  color: #303133;\n}\n\n.mobile-sidebar {\n  padding: 20px 0;\n}\n\n.el-drawer__body {\n  padding: 0;\n}\n\n.el-drawer__header {\n  margin-bottom: 0;\n  padding: 15px 20px;\n  border-bottom: 1px solid #ebeef5;\n}\n\n@media (max-width: 767px) {\n  .el-main {\n    padding: 15px;\n  }\n  \n  .search-container {\n    padding: 0 15px 15px 15px;\n  }\n  \n  .process-type-selector {\n    margin: 0 15px 15px;\n    padding: 10px 0;\n  }\n  \n  .process-type-selector h4 {\n    padding: 0 15px;\n  }\n  \n  .process-type-menu .el-menu-item {\n    height: 48px;\n    line-height: 48px;\n    padding: 0 15px;\n  }\n}\n</style> "],"mappings":";;;;;;;;;AAkHA;EACAA,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,WAAA;MACAC,WAAA;MACAC,WAAA,EAAAC,MAAA,CAAAC,UAAA;MACAC,uBAAA;MACAC,mBAAA;MACAC,SAAA,GACA;QACAC,IAAA;QACAC,KAAA;QACAC,IAAA;QACAC,mBAAA;MACA,GACA;QACAH,IAAA;QACAC,KAAA;QACAC,IAAA;QACAC,mBAAA;MACA;IAEA;EACA;EACAC,QAAA;IACAC,YAAA,WAAAA,aAAA;MACA,YAAAC,MAAA,CAAAN,IAAA;IACA;IACAO,iBAAA,WAAAA,kBAAA;MAAA,IAAAC,KAAA;MACA,YAAAT,SAAA,CAAAU,MAAA,WAAAC,IAAA;QAAA,OACAA,IAAA,CAAAT,KAAA,CAAAU,WAAA,GAAAC,QAAA,CAAAJ,KAAA,CAAAhB,WAAA,CAAAmB,WAAA;MAAA,CACA;IACA;IACAE,QAAA,WAAAA,SAAA;MACA,YAAAnB,WAAA;IACA;IACAoB,uBAAA,WAAAA,wBAAA;MACA,YAAAhB,mBAAA;IACA;IACAiB,uBAAA,WAAAA,wBAAA;MACA,YAAAjB,mBAAA;IACA;EACA;EACAkB,OAAA;IACAC,YAAA,WAAAA,aAAA;MACA;IAAA,CACA;IACAC,YAAA,WAAAA,aAAA;MACA,KAAAxB,WAAA,GAAAC,MAAA,CAAAC,UAAA;IACA;IACAuB,sBAAA,WAAAA,uBAAA;MAAA,IAAAC,MAAA;MACA;MACAC,UAAA;QACAD,MAAA,CAAA3B,WAAA;MACA;IACA;IACA6B,mBAAA,WAAAA,oBAAAZ,IAAA;MACA;MACA,KAAAb,uBAAA,GAAAa,IAAA,CAAAP,mBAAA;;MAEA;MACA,IAAAO,IAAA,CAAAV,IAAA,CAAAY,QAAA;QACA,KAAAd,mBAAA;MACA,WAAAY,IAAA,CAAAV,IAAA,CAAAY,QAAA;QACA,KAAAd,mBAAA;MACA;IACA;IACAyB,uBAAA,WAAAA,wBAAAC,IAAA;MACA,KAAA1B,mBAAA,GAAA0B,IAAA;MACA;MACA,KAAAC,KAAA,CAAAC,KAAA,wBAAAF,IAAA;IACA;EACA;EACAG,OAAA,WAAAA,QAAA;IACAhC,MAAA,CAAAiC,gBAAA,gBAAAV,YAAA;;IAEA;IACA,IAAAW,WAAA,QAAAvB,MAAA,CAAAN,IAAA;IACA,IAAA8B,WAAA,QAAA/B,SAAA,CAAAgC,IAAA,WAAArB,IAAA;MAAA,OAAAA,IAAA,CAAAV,IAAA,KAAA6B,WAAA;IAAA;IACA,IAAAC,WAAA;MACA,KAAAjC,uBAAA,GAAAiC,WAAA,CAAA3B,mBAAA;IACA;EACA;EACA6B,aAAA,WAAAA,cAAA;IACArC,MAAA,CAAAsC,mBAAA,gBAAAf,YAAA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}