- - - - - {{ menu.label }} - - - - - 请选择应用 + + + + + 欢迎使用村微产品库 + + + + +
import {mapState} from "vuex"; +import SliderNav from "./components/sliderNav"; export default { name: 'app', + components: {SliderNav}, computed: { ...mapState(['apps']), serveName() { @@ -39,10 +41,6 @@ export default { } return names[process.env.NODE_ENV] }, - menus() { - let reg = new RegExp(`.*${this.search.replace(/-/g,'')||''}.*`, 'gi') - return (this.apps || []).filter(e => !this.search || reg.test(e.name) || reg.test(e.label)) - }, selectedApp() { return this.$route.matched.length > 0 }, @@ -50,14 +48,26 @@ export default { let url = '/auth/oauth/token'; /project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288") return url + }, + currentTab() { + let {name, query, hash} = this.$route + return [name, query?.id, hash].join("") } }, + watch: { + $route: { + immediate: true, + handler(v) { + this.getTabs(v) + } + }, + }, data() { return { token: "", - search: "", dialog: false, - showTools: true + showTools: true, + tabs: [] } }, methods: { @@ -86,12 +96,37 @@ export default { this.dialog = true }) }, - recordSearch() { - localStorage.setItem("searchApp", this.search) - } + handleTabClick(tab) { + let to = {}, selectedTab = this.tabs.find(e => e.name == tab.name) + if (selectedTab) { + to = {...selectedTab, params: {tabclick: 1}} + } else { + let {name, query, hash} = tab + to = {name, query, hash, params: {tabclick: 1}} + } + this.$router.push({...to}) + }, + handleTabRemove(id = this.currentTab) { + let tabs = JSON.parse(JSON.stringify(this.tabs)), + index = tabs?.findIndex(e => id == e.name) + if (id == this.currentTab) { + let next = tabs?.[index + 1] || tabs?.[index - 1] + this.handleTabClick(next) + } + this.tabs.splice(index, 1) + }, + getTabs() { + let {name, query, hash} = this.$route + let tab = this.tabs.find(e => e.name == this.currentTab) + if (tab) { + } else if (name) { + let menu = this.apps.find(e => e.name == name) + this.tabs.push({name, query, hash, label: menu?.label}) + } + }, }, created() { - this.search = localStorage.getItem("searchApp") || "" + this.getTabs() this.token = localStorage.getItem("ui-token") if (this.token) this.getUserInfo() wx = jWeixin @@ -112,35 +147,6 @@ html, body { margin: 0; } -.villageFinance-autocomplete { - width: auto !important; - - li { - line-height: normal !important; - padding: 7px !important; - border-bottom: 1px solid #f1f1f1; - - &:hover { - background-color: #f4f4f4 !important; - } - } - - .name { - text-overflow: ellipsis; - line-height: normal; - overflow: hidden; - } - - .addr { - font-size: 12px; - color: #b4b4b4; - } - - .highlighted .addr { - color: #ddd; - } -} - #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; @@ -207,18 +213,6 @@ html, body { } } - & > .main-content { - width: 100%; - flex: 1; - min-height: 0; - box-sizing: border-box; - - & > *:last-child { - flex: 1; - min-width: 0; - } - } - .sign-box { z-index: 99; margin: -10px; @@ -229,5 +223,90 @@ html, body { height: 100%; background: rgba(0, 0, 0, 0.2); } + + +} + +.layout { + flex: 1; + min-width: 0; + height: 100%; + background: #F5F6F9; + display: flex; + flex-direction: column; + + & > .el-tabs__header { + margin-bottom: 0; + background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%); + height: 40px; + display: flex; + align-items: flex-end; + border: none; + + .el-tabs__nav { + border: none; + } + + .el-tabs__item { + padding: 0 8px 0 12px; + text-align: left; + min-width: 130px; + height: 36px; + line-height: 36px; + border: none; + color: #555; + font-size: 12px; + + & + .el-tabs__item { + margin-left: 2px; + } + + .el-icon-close { + float: right; + width: auto; + height: 100%; + line-height: 36px; + background: transparent; + font-size: 16px; + color: #89b; + + &:hover { + color: #000; + } + } + + &.is-active { + border: 1px solid #D8DCE3; + border-bottom: none; + border-radius: 4px 4px 0 0; + background: #F5F6F9; + color: #222; + + &:after { + display: none; + } + } + + &:after { + position: absolute; + right: 0; + content: " "; + width: 1px; + background: #D8DCE3; + height: 24px; + top: 50%; + transform: translateY(-50%); + } + } + } + + .el-tabs__content { + flex: 1; + min-height: 0; + + .el-tab-pane { + height: 100%; + } + } } diff --git a/examples/components/sliderNav.vue b/examples/components/sliderNav.vue new file mode 100644 index 00000000..fb9f173f --- /dev/null +++ b/examples/components/sliderNav.vue @@ -0,0 +1,254 @@ + + + + diff --git a/examples/router/autoRoutes.js b/examples/router/autoRoutes.js index 58930cfc..21e52671 100644 --- a/examples/router/autoRoutes.js +++ b/examples/router/autoRoutes.js @@ -1,13 +1,10 @@ import store from "../store"; import {waiting} from "../utils"; +import appEntry from "../views/apps/appEntry"; +import router from "./router"; export default { - routes: () => store.state.apps.map(e => { - return { - ...e, - component: () => import(`../views/apps/${e.entry}`) - } - }), + routes: () => store.state.apps, init() { //约束正则式 store.commit("cleanApps") @@ -22,57 +19,16 @@ export default { if (file.default) { let {name, label} = file.default, addApp = { - name: [path.replace(/\.\/([^\/]+)\/.*/, '$1'), name].join("_"), label: label || name, - path: path.replace(/\.(\/.+\/App.+)\.vue$/, '/$1'), - entry: 'appEntry', + name: path.replace(/\.\/?(vue)?/g, '')?.split("/").join("_"), label: label || name, + path: path.replace(/\.(\/.+\/App.+)\.vue$/, '$1'), + component: appEntry, module: file.default } waiting.setContent(`加载${name}...`) + router.addRoute(addApp) //命名规范入口文件必须以App开头 return store.commit("addApp", addApp) } else return 0 }))).then(() => waiting.close()) - // let files = require.context('../../packages', true, /\.(\/.+)\/App[A-Z][^\/]+\.vue$/) - // files.keys().map(path => { - // if (files(path).default) { - // let {name, label} = files(path).default, - // addApp = { - // name, label: label || name, - // path: path.replace(/\.(\/.+\/App.+)\.vue$/, '/packages$1'), - // entry: 'appEntry', - // module: files(path).default - // } - // //命名规范入口文件必须以App开头 - // store.commit("addApp", addApp) - // } - // }) - // let cores = require.context('../../core', true, /\.(\/.+)\/App[^\/]+\.vue$/) - // cores.keys().map(path => { - // if (cores(path).default) { - // let {name, label} = cores(path).default, - // addApp = { - // name, label: label || name, - // path: path.replace(/\.(\/.+\/App.+)\.vue$/, '/core$1'), - // entry: 'appEntry', - // module: cores(path).default - // } - // //命名规范入口文件必须以App开头 - // store.commit("addApp", addApp) - // } - // }) - // let project = require.context('../../project', true, /\.(\/.+)\/App[^\/]+\.vue$/) - // project.keys().map(path => { - // if (project(path).default) { - // let {name, label} = project(path).default, - // addApp = { - // name: [path.replace(/\.\/([^\/]+)\/.*/, '$1'), name].join("_"), label: label || name, - // path: path.replace(/\.(\/.+\/App.+)\.vue$/, '/project$1'), - // entry: 'appEntry', - // module: project(path).default - // } - // //命名规范入口文件必须以App开头 - // store.commit("addApp", addApp) - // } - // }) } } diff --git a/examples/views/apps/appEntry.vue b/examples/views/apps/appEntry.vue index 542235cf..fdf624de 100644 --- a/examples/views/apps/appEntry.vue +++ b/examples/views/apps/appEntry.vue @@ -28,6 +28,7 @@ export default { flex: 1; min-width: 0; min-height: 0; + height: 100%; & > * { height: 100%; diff --git a/packages/wechat/AppInterview/AppInterview.vue b/packages/wechat/AppInterview/AppInterview.vue deleted file mode 100644 index 2ed746f5..00000000 --- a/packages/wechat/AppInterview/AppInterview.vue +++ /dev/null @@ -1,169 +0,0 @@ - - - - - diff --git a/packages/wechat/AppInterview/interviewDetail.vue b/packages/wechat/AppInterview/interviewDetail.vue deleted file mode 100644 index b472b13e..00000000 --- a/packages/wechat/AppInterview/interviewDetail.vue +++ /dev/null @@ -1,97 +0,0 @@ - - - - - diff --git a/vue.config.js b/vue.config.js index 65df9360..8324c868 100644 --- a/vue.config.js +++ b/vue.config.js @@ -31,6 +31,7 @@ module.exports = { .add(path.resolve(__dirname, 'core')) .add(path.resolve(__dirname, 'project')) .add(path.resolve(__dirname, 'oms')) + .add(path.resolve(__dirname, 'examples')) .add(path.resolve(__dirname, 'node_modules/dvcp-dv-ui')) .add(path.resolve(__dirname, 'node_modules/dvcp-ui')) .end()