style: 分页样式调整
This commit is contained in:
parent
c13c1dff03
commit
2ed6104a2f
|
@ -777,3 +777,11 @@ export default mergeConfig(
|
|||
})
|
||||
);
|
||||
```
|
||||
## 本地生产环境调试
|
||||
需安装docker: https://www.docker.com/, 选择对应系统版本安装。
|
||||
```bash
|
||||
cd frontend/
|
||||
pnpm run build:local
|
||||
docker build -t metersphere/ms-v3 .
|
||||
docker run -d -p 5100:5100 --name ms-v3 metersphere/ms-v3
|
||||
```
|
||||
|
|
|
@ -494,49 +494,47 @@
|
|||
}
|
||||
|
||||
/** 分页 **/
|
||||
.arco-pagination {
|
||||
.ms-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.arco-pagination-list {
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.arco-pagination-jumper {
|
||||
}
|
||||
&-jumper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
width: 160px;
|
||||
background: var(--color-text-n9);
|
||||
.arco-pagination-jumper-input {
|
||||
gap: 8px;
|
||||
.ms-pagination-jumper-input {
|
||||
padding: 3px 8px;
|
||||
width: 57px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--color-text-input-border);
|
||||
border-radius: 3px;
|
||||
color: var(--color-text-1);
|
||||
background: var(--color-text-10);
|
||||
box-sizing: border-box;
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.arco-pagination-jumper-total-page {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
&-text-goto,
|
||||
&-total-page {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
.arco-pagination-simple .arco-pagination-jumper .arco-pagination-jumper-input {
|
||||
width: 57px;
|
||||
}
|
||||
.arco-pagination-total {
|
||||
color: var(--color-text-2) !important;
|
||||
}
|
||||
.arco-pagination-options {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.arco-pagination-total {
|
||||
}
|
||||
}
|
||||
&-total {
|
||||
margin-right: 16px !important;
|
||||
}
|
||||
.arco-pagination-item-previous {
|
||||
margin-left: 14px !important;
|
||||
}
|
||||
.arco-pagination-size-small .arco-pagination-item {
|
||||
color: var(--color-text-2) !important;
|
||||
}
|
||||
&-options {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -544,17 +542,20 @@
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.arco-pagination-item-ellipsis:hover {
|
||||
&-previous {
|
||||
margin-left: 14px !important;
|
||||
}
|
||||
&-ellipsis:hover {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.arco-pagination-size-small
|
||||
.arco-pagination-item:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
|
||||
}
|
||||
&:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
|
||||
border: 1px solid var(--color-text-input-border);
|
||||
}
|
||||
.arco-pagination-item-active {
|
||||
}
|
||||
&-active {
|
||||
border-color: rgb(var(--primary-5)) !important;
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { getCurrentInstance, inject, InjectionKey } from 'vue';
|
|||
import type { ArcoOptions, ConfigProvider } from './types';
|
||||
|
||||
const COMPONENT_PREFIX = 'A';
|
||||
const CLASS_PREFIX = 'arco';
|
||||
const CLASS_PREFIX = 'ms';
|
||||
const GLOBAL_CONFIG_NAME = '$arco';
|
||||
|
||||
export const configProviderInjectionKey: InjectionKey<ConfigProvider> = Symbol('ArcoConfigProvider');
|
||||
|
|
|
@ -64,6 +64,8 @@ export interface MsTableProps {
|
|||
// 编辑的key,默认为name
|
||||
editKey?: string;
|
||||
[key: string]: any;
|
||||
// 是否展示禁用的行
|
||||
noDisable?: boolean;
|
||||
}
|
||||
|
||||
export interface MsTableSelectAll {
|
||||
|
|
|
@ -3,4 +3,6 @@ export interface UserGroupState {
|
|||
currentName: string;
|
||||
currentTitle: string;
|
||||
currentId: string;
|
||||
// 当前用户类型
|
||||
currentType: string;
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@ const useUserGroupStore = defineStore('userGroup', {
|
|||
currentName: '',
|
||||
currentTitle: '',
|
||||
currentId: '',
|
||||
currentType: '',
|
||||
}),
|
||||
getters: {
|
||||
userGroupInfo(state: UserGroupState): UserGroupState {
|
||||
|
|
|
@ -286,7 +286,6 @@
|
|||
<style scoped lang="less">
|
||||
.usergroup-auth-table {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
:deep(.arco-table-container) {
|
||||
border-top: 1px solid var(--color-text-n8) !important;
|
||||
border-right: 1px solid var(--color-text-n8) !important;
|
||||
|
|
|
@ -115,7 +115,7 @@
|
|||
const handleListItemClick = (element: UserGroupItem) => {
|
||||
const { id, name, type } = element;
|
||||
currentId.value = id;
|
||||
store.setInfo({ currentName: name, currentTitle: type, currentId: id });
|
||||
store.setInfo({ currentName: name, currentTitle: type, currentId: id, currentType: type });
|
||||
};
|
||||
|
||||
// 用户组数据初始化
|
||||
|
|
|
@ -32,7 +32,6 @@
|
|||
dataIndex: 'name',
|
||||
showDrag: false,
|
||||
showInTable: true,
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
title: 'system.userGroup.email',
|
||||
|
@ -60,8 +59,9 @@
|
|||
|
||||
const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(postUserByUserGroup, {
|
||||
tableKey: TableKeyEnum.USERGROUPUSER,
|
||||
scroll: { y: 750, x: '600px' },
|
||||
scroll: { y: 'auto', x: '600px' },
|
||||
selectable: true,
|
||||
noDisable: true,
|
||||
});
|
||||
|
||||
const fetchData = async () => {
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-radio-group v-model="currentTable" class="ml-[14px]" type="button">
|
||||
<a-radio-group v-if="couldShowUser" v-model="currentTable" class="ml-[14px]" type="button">
|
||||
<a-radio value="auth">{{ t('system.userGroup.auth') }}</a-radio>
|
||||
<a-radio value="user">{{ t('system.userGroup.user') }}</a-radio>
|
||||
</a-radio-group>
|
||||
|
@ -33,7 +33,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import MsCard from '@/components/pure/ms-card/index.vue';
|
||||
import useUserGroupStore from '@/store/modules/setting/usergroup';
|
||||
|
@ -41,12 +41,13 @@
|
|||
import UserTable from './components/userTable.vue';
|
||||
import AuthTable from './components/authTable.vue';
|
||||
|
||||
const currentTable = ref('user');
|
||||
const currentTable = ref('auth');
|
||||
const collapse = ref(true);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const store = useUserGroupStore();
|
||||
const couldShowUser = computed(() => store.userGroupInfo.currentType === 'SYSTEM');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
Loading…
Reference in New Issue