Skip to content

Commit

Permalink
Merge pull request apache#165 from Helltab/feature/ui/framework/vue3
Browse files Browse the repository at this point in the history
fixes apache#163, apache#153, apache#164, apache#161, feature/UI/framework/vue3
  • Loading branch information
chickenlj authored Jan 22, 2024
2 parents 7c43062 + 62bff9c commit 50094c4
Show file tree
Hide file tree
Showing 18 changed files with 364 additions and 33 deletions.
1 change: 1 addition & 0 deletions ui-vue3/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"pinyin-pro": "^3.19.3",
"ts-node": "^10.9.2",
"tslib": "^2.6.2",
"vue": "^3.3.10",
Expand Down
8 changes: 5 additions & 3 deletions ui-vue3/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@
import { RouterView } from 'vue-router'
import enUS from 'ant-design-vue/es/locale/en_US'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { provide, reactive, ref, watch } from 'vue'
import { computed, provide, reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { notification } from 'ant-design-vue'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
import { PRIMARY_COLOR } from '@/base/constants'
import { localeConfig } from '@/base/i18n'
import { changeLanguage, i18n, localeConfig } from '@/base/i18n'
import devTool from '@/utils/DevToolUtil'
dayjs.locale('en')
Expand All @@ -44,11 +44,13 @@ provide(PROVIDE_INJECT_KEY.LOCALE, i18nConfig)
function globalQuestion() {
devTool.todo('show Q&A tips')
}
const localeGlobal = reactive(i18n.global.locale)
</script>

<template>
<a-config-provider
:locale="i18nConfig.locale === 'en' ? enUS : zhCN"
:locale="localeGlobal === 'en' ? enUS : zhCN"
:theme="{
token: {
colorPrimary: PRIMARY_COLOR
Expand Down
23 changes: 23 additions & 0 deletions ui-vue3/src/api/mock/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

const modulesFiles: any = import.meta.glob('./**.ts', { eager: true })
const fileList = []
for (const key of Object.keys(modulesFiles)) {
fileList.push(modulesFiles[key].default)
}
export default fileList
41 changes: 41 additions & 0 deletions ui-vue3/src/api/mock/mockApp.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import Mock from 'mockjs'

Mock.mock('/mock/application/search', 'get', () => {
let total = Mock.mock('@integer(8, 1000)')
let list = []
for (let i = 0; i < total; i++) {
list.push({
appName: 'app_' + Mock.mock('@string(2,10)'),
instanceNum: Mock.mock('@integer(80, 200)'),
deployCluster: 'cluster_' + Mock.mock('@string(5)'),
'registerClusters|1-3': ['cluster_' + Mock.mock('@string(5)')]
})
}
return {
code: 200,
message: 'success',
data: Mock.mock({
total: total,
curPage: 1,
pageSize: 10,
data: list
})
}
})
26 changes: 26 additions & 0 deletions ui-vue3/src/api/service/app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import request from '@/base/http/request'

export const searchApplications = (params: any): Promise<any> => {
return request({
url: '/application/search',
method: 'get',
params
})
}
1 change: 1 addition & 0 deletions ui-vue3/src/base/enums/ProvideInject.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@ const KEY_PREFIX = '__PROVIDE_INJECT_KEY_'

export const PROVIDE_INJECT_KEY = {
LOCALE: KEY_PREFIX + 'LOCALE',
SEARCH_DOMAIN: KEY_PREFIX + 'SEARCH_DOMAIN',
COLLAPSED: KEY_PREFIX + 'COLLAPSED'
}
10 changes: 8 additions & 2 deletions ui-vue3/src/base/i18n/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -264,10 +264,16 @@ const words: I18nType = {
resources: 'Resources',
applications: 'Applications',
instances: 'Instances',

applicationDomain: {
name: 'Application Name',
detail: 'Application Detail'
},
searchDomain: {
total: 'Total',
unit: 'items'
},
backHome: 'Back Home',
noPageTip: 'Sorry, the page you visited does not exist.',

globalSearchTip: 'Search ip, application, instance, service'
}

Expand Down
7 changes: 4 additions & 3 deletions ui-vue3/src/base/i18n/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@
import { createI18n } from 'vue-i18n'
import { LOCAL_STORAGE_LOCALE } from '@/base/constants'
import { messages } from '@/base/i18n/messages'
import { reactive } from 'vue'

export const localeConfig = {
export const localeConfig = reactive({
// todo use system's locale
locale: localStorage.getItem(LOCAL_STORAGE_LOCALE) || 'cn',
opts: [
Expand All @@ -32,9 +33,9 @@ export const localeConfig = {
title: '中文'
}
]
}
})

export const i18n = createI18n({
export const i18n: any = createI18n({
locale: localeConfig.locale,
legacy: false,
globalInjection: true,
Expand Down
9 changes: 8 additions & 1 deletion ui-vue3/src/base/i18n/zh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,14 @@ const words: I18nType = {
resources: '资源详情',
applications: '应用',
instances: '实例',

applicationDomain: {
name: '应用名',
detail: '应用详情'
},
searchDomain: {
total: '共计',
unit: '条'
},
backHome: '回到首页',
noPageTip: '抱歉,你访问的页面不存在',

Expand Down
85 changes: 85 additions & 0 deletions ui-vue3/src/components/SearchTable.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements. See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<template>
<div class="__container_search_table">
<a-form>
<a-row justify="start">
<a-col :span="10">
<a-form-item :label="$t('applicationDomain.name')">
<a-input-group compact>
<a-input-search
v-model:value="searchDomain.params.appName"
placeholder="input search text"
enter-button
@search="searchDomain.onSearch()"
></a-input-search>
</a-input-group>
</a-form-item>
</a-col>
<a-col :span="14"> </a-col>
</a-row>
</a-form>

<div class="search-table-container">
<a-table
:pagination="pagination"
:scroll="{ y: '55vh' }"
:columns="searchDomain?.table.columns"
:data-source="searchDomain?.result"
>
<template #bodyCell="{ text, record, index, column }">
<span v-if="column.key === 'idx'">{{ index + 1 }}</span>
<slot
name="bodyCell"
:text="text"
:record="record"
:index="index"
:column="column"
v-else
>
</slot>
</template>
</a-table>
</div>
</div>
</template>
<script setup lang="ts">
import type { ComponentInternalInstance } from 'vue'
import { getCurrentInstance, inject } from 'vue'
import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
import type { SearchDomain } from '@/utils/SearchUtil'
const {
appContext: {
config: { globalProperties }
}
} = <ComponentInternalInstance>getCurrentInstance()
const searchDomain: SearchDomain | any = inject(PROVIDE_INJECT_KEY.SEARCH_DOMAIN)
console.log(searchDomain)
const pagination = {
showTotal: (v: any) =>
globalProperties.$t('searchDomain.total') +
': ' +
v +
' ' +
globalProperties.$t('searchDomain.unit')
}
</script>
<style lang="less" scoped></style>
2 changes: 1 addition & 1 deletion ui-vue3/src/layout/breadcrumb/layout_bread.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="__container_layout_bread">
<a-breadcrumb>
<a-breadcrumb-item v-for="r in routes">{{ $t(r.name) }}</a-breadcrumb-item>
<a-breadcrumb-item>{{ pathId }}</a-breadcrumb-item>
<a-breadcrumb-item v-if="pathId">{{ pathId }}</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
Expand Down
13 changes: 9 additions & 4 deletions ui-vue3/src/layout/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
-->
<template>
<div class="__container_layout_index">
<a-layout style="min-height: 100vh">
<a-layout style="height: 100vh">
<a-layout-sider
width="268"
v-model:collapsed="collapsed"
Expand All @@ -33,9 +33,7 @@
<a-layout>
<layout_header :collapsed="collapsed"></layout_header>
<layout_bread></layout_bread>
<a-layout-content
:style="{ margin: '16px', padding: '16px', background: '#fff', minHeight: '280px' }"
>
<a-layout-content class="layout-content">
<router-view v-slot="{ Component }">
<transition name="slide-fade">
<component :is="Component" />
Expand Down Expand Up @@ -93,6 +91,13 @@ router.beforeEach((to, from, next) => {
margin-right: 5px;
}
}
.layout-content {
margin: 16px;
padding: 16px;
background: #fff;
overflow: auto;
max-height: 80vh;
}
}
</style>
<style>
Expand Down
7 changes: 3 additions & 4 deletions ui-vue3/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ import router from './router'
import App from './App.vue'
import 'ant-design-vue/dist/reset.css'
import { i18n } from '@/base/i18n'
import './api/mock/mockServer'
import './api/mock/mockCluster'
import './api/mock/mockVersion'
import './api/mock/mockGlobalSearch'
import './api/mock/index'
// import './api/mock/mockCluster'
// import './api/mock/mockVersion'

import Vue3ColorPicker from 'vue3-colorpicker'
import 'vue3-colorpicker/style.css'
Expand Down
13 changes: 7 additions & 6 deletions ui-vue3/src/router/defaultRoutes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,11 @@ export const routes: Readonly<RouteRecordType[]> = [
},
{
path: '/detail/:pathId',
name: 'application-tab1',
name: 'applicationDomain.detail',
component: () => import('../views/resources/applications/tabs/tab1.vue'),
meta: {
tab: true
tab: true,
icon: 'material-symbols:view-in-ar'
}
},
{
Expand Down Expand Up @@ -120,14 +121,14 @@ export const routes: Readonly<RouteRecordType[]> = [
children: [
{
path: '/index',
name: 'applications_index',
component: () => import('../views/resources/applications/index.vue'),
name: 'tab_demo_index',
component: () => import('../views/common/tab_demo/index.vue'),
meta: {
hidden: true
}
},
{
path: '/tab1',
path: '/tab1/:pathId',
name: 'tab1',
component: () => import('../views/common/tab_demo/tab1.vue'),
meta: {
Expand All @@ -136,7 +137,7 @@ export const routes: Readonly<RouteRecordType[]> = [
}
},
{
path: '/tab2',
path: '/tab2/:pathId',
name: 'tab2',
component: () => import('../views/common/tab_demo/tab2.vue'),
meta: {
Expand Down
Loading

0 comments on commit 50094c4

Please sign in to comment.