fix: 初始化
This commit is contained in:
jiaojinfeng
38
packages/icpx-ruler/src/components/HelloWorld.vue
Normal file
38
packages/icpx-ruler/src/components/HelloWorld.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
67
packages/icpx-ruler/src/components/Test.vue
Normal file
67
packages/icpx-ruler/src/components/Test.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="div">
|
||||
<div>我是微前端的测试页面</div>
|
||||
<div>我是传过来的参数:{{ params.data }}</div>
|
||||
<div>{{ str }}</div>
|
||||
<h-button type="primary" @click="onClick">点我</h-button>
|
||||
<!-- <div style="width: 1000px">
|
||||
<h-b-button-group v-bind="menuProps" ref="menuRef" id="OrganizationPag" />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref } from 'vue';
|
||||
import { HModal } from '@crami/ui';
|
||||
import { useButtonGroup } from '@crami/bui-platform';
|
||||
// 模块联邦: 替换成远程引入
|
||||
import { commonApi } from '@remote/icpx-platform/commonApi';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TEST',
|
||||
components: {},
|
||||
setup() {
|
||||
const str = ref('hhhhh');
|
||||
let params = reactive({
|
||||
data: '我没有获取参数',
|
||||
});
|
||||
try {
|
||||
if (window.$wujie) {
|
||||
params = window.$wujie?.props;
|
||||
}
|
||||
} catch (error) {}
|
||||
|
||||
const [menuRef, menuProps, { getRowMenu }] = useButtonGroup({
|
||||
sortRule: 'default',
|
||||
pageName: 'OrganizationPage',
|
||||
checkPermission: false,
|
||||
dataSourceApi: {
|
||||
url: commonApi().studioCache.getMetaInfo.url,
|
||||
params: {
|
||||
...commonApi().studioCache.getMetaInfo.params,
|
||||
...{
|
||||
type: 'menuv2',
|
||||
name: 'P_SYS_ORG_MENU', //commonParams.value?.menuName,
|
||||
},
|
||||
},
|
||||
method: commonApi().studioCache.getMetaInfo.method,
|
||||
},
|
||||
});
|
||||
const onClick = () => {
|
||||
HModal.confirm({ title: '提示', content: 'hello' });
|
||||
};
|
||||
return { str, params, menuRef, menuProps, onClick };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<template v-for="item in items" :key="item.key">
|
||||
<layout-block
|
||||
:theme="item.key"
|
||||
:checked="item.key === value"
|
||||
:disabled="item.disabled"
|
||||
:title="item.title"
|
||||
@click="
|
||||
() => {
|
||||
!item.disabled && handleChange(item.key);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { useI18n } from '@crami/locale';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
import type { ThemeItem } from './index.vue';
|
||||
import LayoutBlock from './layout-block.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: String,
|
||||
list: { type: Array as PropType<ThemeItem[]> },
|
||||
},
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const prefixCls = getPrefixCls('setting-drawer-block-checbox');
|
||||
const { t } = useI18n();
|
||||
const items = computed<ThemeItem[]>(() => {
|
||||
return (
|
||||
props.list || [
|
||||
{
|
||||
key: 'side',
|
||||
title: t('app.setting.layout.side'),
|
||||
},
|
||||
{
|
||||
key: 'top',
|
||||
title: t('app.setting.layout.top'),
|
||||
},
|
||||
{
|
||||
key: 'mix',
|
||||
title: t('app.setting.layout.mix'),
|
||||
},
|
||||
{
|
||||
key: 'left',
|
||||
title: t('app.setting.layout.leftmenu'),
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
const handleChange = (key: string) => {
|
||||
emit('change', key);
|
||||
};
|
||||
|
||||
return {
|
||||
items,
|
||||
prefixCls,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
LayoutBlock,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div style="margin-bottom: 24px">
|
||||
<h3 :class="prefixCls">{{ title }}</h3>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||
import { defineComponent } from 'vue';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BodyWrapper',
|
||||
props: {
|
||||
title: PropTypes.string.def(''),
|
||||
},
|
||||
setup() {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const prefixCls = getPrefixCls('setting-drawer-title');
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
87
packages/icpx-ruler/src/components/setting-drawer/index.less
Normal file
87
packages/icpx-ruler/src/components/setting-drawer/index.less
Normal file
@ -0,0 +1,87 @@
|
||||
@ant-pro-setting-drawer: ~'@{ant-prefix}-pro-setting-drawer';
|
||||
|
||||
.@{ant-pro-setting-drawer} {
|
||||
&-content {
|
||||
position: relative;
|
||||
|
||||
.ant-list-item {
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-block-checbox {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&-selectIcon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 15px;
|
||||
padding-left: 24px;
|
||||
color: @primary-color;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
.action {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-color_block {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 22px;
|
||||
margin: 4px;
|
||||
margin-right: 12px;
|
||||
vertical-align: middle;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 12px;
|
||||
color: @heading-color;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
top: 240px;
|
||||
right: 300px;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background: @primary-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&-production-hint {
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
349
packages/icpx-ruler/src/components/setting-drawer/index.vue
Normal file
349
packages/icpx-ruler/src/components/setting-drawer/index.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<h-drawer
|
||||
:visible="visible"
|
||||
:width="300"
|
||||
:getContainer="getContainer"
|
||||
@close="() => setShow(false)"
|
||||
style="z-index: 99"
|
||||
placement="right"
|
||||
>
|
||||
<template #handle>
|
||||
<div :class="`${prefixCls}-handle`" @click="handleClickShowButton">
|
||||
<close-outlined v-if="visible" :style="iconStyle" />
|
||||
<setting-outlined v-else :style="iconStyle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div :class="`${prefixCls}-content`">
|
||||
<body-wrapper key="pageStyle" :title="t('app.setting.pagestyle')">
|
||||
<block-checkbox
|
||||
:value="value.navTheme"
|
||||
:list="themeList.themeList"
|
||||
@change="val => handleChange('theme', val)"
|
||||
/>
|
||||
</body-wrapper>
|
||||
|
||||
<h-divider />
|
||||
|
||||
<body-wrapper key="mode" :title="t('app.setting.navigationmode')">
|
||||
<block-checkbox
|
||||
:value="value.layout"
|
||||
@change="val => handleChange('layout', val)"
|
||||
></block-checkbox>
|
||||
</body-wrapper>
|
||||
|
||||
<layout-change
|
||||
:contentWidth="value.contentWidth"
|
||||
:fixedHeader="value.fixedHeader"
|
||||
:fixSiderbar="value.fixSidebar"
|
||||
:layout="value.layout"
|
||||
:splitMenus="value.splitMenus"
|
||||
@change="({ type, value }) => handleChange(type, value)"
|
||||
/>
|
||||
|
||||
<h-divider />
|
||||
|
||||
<body-wrapper :title="t('app.setting.othersettings')">
|
||||
<h-list :split="false">
|
||||
<h-list-item>
|
||||
<span style="opacity: 1">{{ t('app.setting.transitionname') }}</span>
|
||||
<template #actions>
|
||||
<h-select
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
:value="value.transitionName || 'null'"
|
||||
@change="val => handleChange('transition', val)"
|
||||
>
|
||||
<h-select-option value="null">Null</h-select-option>
|
||||
<h-select-option value="slide-fadein-up">Slide Up</h-select-option>
|
||||
<h-select-option value="slide-fadein-right">Slide Right</h-select-option>
|
||||
<h-select-option value="fadein">Fade In</h-select-option>
|
||||
<h-select-option value="zoom-fadein">Zoom</h-select-option>
|
||||
</h-select>
|
||||
</template>
|
||||
</h-list-item>
|
||||
|
||||
<h-tooltip>
|
||||
<h-list-item>
|
||||
<span style="opacity: 1">{{ t('app.setting.multitab') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:checked="value.multiTab"
|
||||
@change="() => handleChange('multiTab', !value.multiTab)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip placement="left" :title="t('app.setting.multitab.fixed.hit')">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: !value.multiTab ? '0.5' : '1' }">
|
||||
{{ t('app.setting.multitab.fixed') }}
|
||||
</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:checked="value.multiTabFixed"
|
||||
:disabled="!value.multiTab && !value.fixedHeader"
|
||||
@change="() => handleChange('multiTabFixed', !value.multiTabFixed)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-list-item>
|
||||
<span style="opacity: 0.5">{{ t('app.setting.weakmode') }}</span>
|
||||
<template #actions>
|
||||
<h-switch size="small" :checked="false" :disabled="true" />
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-list>
|
||||
</body-wrapper>
|
||||
</div>
|
||||
</h-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
||||
import { defineComponent, computed, reactive, ref } from 'vue';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
import { CloseOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
||||
import type { ContentWidth } from '../base-layouts/typing';
|
||||
import { useStore } from 'vuex';
|
||||
import {
|
||||
SET_CONTENT_WIDTH,
|
||||
SET_LAYOUT,
|
||||
SET_NAV_THEME,
|
||||
SET_SPLIT_MENUS,
|
||||
SET_TRANSITION_NAME,
|
||||
SET_FIXED_HEADER,
|
||||
SET_FIXED_SIDEBAR,
|
||||
SET_MULTI_TAB,
|
||||
SET_FIXED_MULTI_TAB,
|
||||
} from '@/store/modules/app/mutations';
|
||||
import BodyWrapper from './body-wrapper.vue';
|
||||
import BlockCheckbox from './block-checkbox.vue';
|
||||
import LayoutChange from './layout-change.vue';
|
||||
import { useI18n } from '@crami/locale';
|
||||
import type { LayoutBlockTheme } from './layout-block.vue';
|
||||
|
||||
const iconStyle = {
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
};
|
||||
|
||||
export interface ThemeItem {
|
||||
disabled?: boolean;
|
||||
key: LayoutBlockTheme;
|
||||
url?: string;
|
||||
title: string;
|
||||
}
|
||||
export interface ThemeConfig {
|
||||
key: string;
|
||||
fileName?: string;
|
||||
theme: string;
|
||||
modifyVars: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface SettingProps {
|
||||
theme: 'dark' | 'light' | 'realDrak';
|
||||
primaryColor: string;
|
||||
layout: 'side' | 'top' | 'mix' | 'left';
|
||||
colorWeak: boolean;
|
||||
contentWidth: ContentWidth;
|
||||
fixedHeader: boolean;
|
||||
fixSiderbar: boolean;
|
||||
hideHintAlert: boolean;
|
||||
hideCopyButton: boolean;
|
||||
}
|
||||
|
||||
export const vueSettingProps = {
|
||||
theme: PropTypes.oneOf(['dark', 'light', 'realDark']),
|
||||
primaryColor: PropTypes.string,
|
||||
layout: PropTypes.oneOf(['side', 'top', 'mix', 'left']),
|
||||
colorWeak: PropTypes.bool,
|
||||
contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
|
||||
fixedHeader: PropTypes.bool,
|
||||
fixSiderbar: PropTypes.bool,
|
||||
hideHintAlert: PropTypes.bool.def(false),
|
||||
hideCopyButton: PropTypes.bool.def(false),
|
||||
};
|
||||
|
||||
const getThemeList = (t: (s: string) => string) => {
|
||||
// @ts-ignoe
|
||||
// const list: ThemeConfig[] = window.antdv_pro_plugin_ant_themeVar || [];
|
||||
const list: ThemeConfig[] = [];
|
||||
const themeList: ThemeItem[] = [
|
||||
{
|
||||
key: 'light',
|
||||
title: t('app.setting.pagestyle.light'),
|
||||
},
|
||||
{
|
||||
key: 'dark',
|
||||
title: t('app.setting.pagestyle.dark'),
|
||||
},
|
||||
{
|
||||
key: 'realDark',
|
||||
title: t('app.setting.pagestyle.realdark'),
|
||||
},
|
||||
];
|
||||
|
||||
const darkColorList = [
|
||||
{
|
||||
key: '#1890ff',
|
||||
color: '#1890ff',
|
||||
theme: 'dark',
|
||||
},
|
||||
];
|
||||
|
||||
const lightColorList = [
|
||||
{
|
||||
key: '#1890ff',
|
||||
color: '#1890ff',
|
||||
theme: 'dark',
|
||||
},
|
||||
];
|
||||
|
||||
if (list.find(item => item.theme === 'dark')) {
|
||||
themeList.push({
|
||||
key: 'realDark',
|
||||
url: 'https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg',
|
||||
title: t('app.setting.pagestyle.realdark'),
|
||||
});
|
||||
}
|
||||
// insert theme color List
|
||||
list.forEach(item => {
|
||||
const color = (item.modifyVars || {})['@primary-color'];
|
||||
if (item.theme === 'dark' && color) {
|
||||
darkColorList.push({
|
||||
color,
|
||||
...item,
|
||||
});
|
||||
}
|
||||
if (!item.theme || item.theme === 'light') {
|
||||
lightColorList.push({
|
||||
color,
|
||||
...item,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
colorList: {
|
||||
dark: darkColorList,
|
||||
light: lightColorList,
|
||||
},
|
||||
themeList,
|
||||
};
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SettingDrawer',
|
||||
props: {
|
||||
// value: {
|
||||
// type: Object as PropType<SettingProps>,
|
||||
// required: true,
|
||||
// },
|
||||
getContainer: PropTypes.func,
|
||||
},
|
||||
emits: ['change'],
|
||||
setup() {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const prefixCls = getPrefixCls('setting-drawer');
|
||||
const visible = ref(false);
|
||||
const { t } = useI18n();
|
||||
const themeList = getThemeList(t);
|
||||
const store = useStore();
|
||||
const value = reactive({
|
||||
layout: computed(() => store.getters['app/layout']),
|
||||
navTheme: computed(() => store.getters['app/navTheme']),
|
||||
contentWidth: computed(() => store.getters['app/contentWidth']),
|
||||
splitMenus: computed(() => store.getters['app/splitMenus']),
|
||||
fixedHeader: computed(() => store.getters['app/fixedHeader']),
|
||||
fixSidebar: computed(() => store.getters['app/fixedSidebar']),
|
||||
transitionName: computed(() => store.getters['app/transitionName']),
|
||||
multiTab: computed(() => store.getters['app/multiTab']),
|
||||
multiTabFixed: computed(() => store.getters['app/multiTabFixed']),
|
||||
});
|
||||
|
||||
const setShow = (flag: boolean) => {
|
||||
visible.value = flag;
|
||||
};
|
||||
|
||||
const handleClickShowButton = (e: Event) => {
|
||||
// 组件库内部会劫持，导致触发两遍，做一下判断，组件库修复后可去除判断
|
||||
if (e) {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
};
|
||||
const updateLayoutSetting = (val: string) => {
|
||||
if (val !== 'mix') {
|
||||
// 强制停止使用分割菜单
|
||||
store.commit(`app/${SET_SPLIT_MENUS}`, false);
|
||||
} else {
|
||||
// Mix 模式下，header 必须被锁定
|
||||
store.commit(`app/${SET_FIXED_HEADER}`, true);
|
||||
}
|
||||
store.commit(`app/${SET_LAYOUT}`, val);
|
||||
};
|
||||
|
||||
const handleChange = (type: string, val: string | boolean) => {
|
||||
console.log('change', type, val);
|
||||
if (type === 'layout') {
|
||||
updateLayoutSetting(val as string);
|
||||
} else if (type === 'theme') {
|
||||
store.commit(`app/${SET_NAV_THEME}`, val);
|
||||
} else if (type === 'splitmenus') {
|
||||
store.commit(`app/${SET_SPLIT_MENUS}`, val);
|
||||
} else if (type === 'fixSiderbar') {
|
||||
store.commit(`app/${SET_FIXED_SIDEBAR}`, val);
|
||||
} else if (type === 'fixedHeader') {
|
||||
// 关闭 header 固定时，取消 multi-tab 固定
|
||||
if (!val) {
|
||||
store.commit(`app/${SET_FIXED_MULTI_TAB}`, false);
|
||||
}
|
||||
store.commit(`app/${SET_FIXED_HEADER}`, val);
|
||||
} else if (type === 'contentWidth') {
|
||||
store.commit(`app/${SET_CONTENT_WIDTH}`, val);
|
||||
} else if (type === 'transition') {
|
||||
store.commit(`app/${SET_TRANSITION_NAME}`, val === 'null' ? '' : val);
|
||||
} else if (type === 'multiTab') {
|
||||
store.commit(`app/${SET_MULTI_TAB}`, val);
|
||||
} else if (type === 'multiTabFixed') {
|
||||
if (!value.fixedHeader) {
|
||||
store.commit(`app/${SET_FIXED_HEADER}`, true);
|
||||
}
|
||||
store.commit(`app/${SET_FIXED_MULTI_TAB}`, val);
|
||||
}
|
||||
|
||||
// emit('change', { type, value });
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
value,
|
||||
prefixCls,
|
||||
iconStyle,
|
||||
themeList,
|
||||
|
||||
visible,
|
||||
setShow,
|
||||
handleChange,
|
||||
handleClickShowButton,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
CloseOutlined,
|
||||
SettingOutlined,
|
||||
|
||||
BodyWrapper,
|
||||
BlockCheckbox,
|
||||
LayoutChange,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './index.less';
|
||||
</style>
|
||||
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<h-tooltip :title="(title && title) || undefined">
|
||||
<div :class="className" :style="disabled ? disableStyle : null" v-bind="$attrs">
|
||||
<div class="inner"></div>
|
||||
<span
|
||||
role="img"
|
||||
aria-label="check"
|
||||
class="anticon anticon-check select-icon"
|
||||
:style="{ display: checked ? 'block' : 'none' }"
|
||||
>
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
focusable="false"
|
||||
data-icon="check"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</h-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { useProProvider } from '../base-layouts/pro-provider';
|
||||
|
||||
export type LayoutBlockTheme = 'light' | 'dark' | 'realDark' | 'side' | 'top' | 'mix' | 'left';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
theme: {
|
||||
type: String as PropType<LayoutBlockTheme>,
|
||||
default: 'light',
|
||||
},
|
||||
title: {
|
||||
type: [Boolean, String, Function],
|
||||
default: (key: string) => key,
|
||||
},
|
||||
},
|
||||
inheritAttrs: false,
|
||||
setup(props) {
|
||||
const { getPrefixCls } = useProProvider();
|
||||
const baseClassName = getPrefixCls('checkbox-item');
|
||||
|
||||
const disableStyle = {
|
||||
cursor: 'not-allowed',
|
||||
};
|
||||
|
||||
const className = computed(() => {
|
||||
return {
|
||||
[baseClassName]: true,
|
||||
[`${baseClassName}-${props.theme}`]: props.theme,
|
||||
[`${baseClassName}-disabled`]: props.disabled,
|
||||
};
|
||||
});
|
||||
return {
|
||||
baseClassName,
|
||||
className,
|
||||
disableStyle,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@block-item-prefix-cls: ~'@{ant-prefix}-pro-checkbox-item';
|
||||
|
||||
.@{block-item-prefix-cls} {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
background-color: #f0f2f5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
|
||||
cursor: pointer;
|
||||
|
||||
> .inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-light {
|
||||
&::before {
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
&-dark,
|
||||
&-side {
|
||||
&::before {
|
||||
z-index: 1;
|
||||
background-color: @menu-dark-bg;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
&::before {
|
||||
background-color: unset;
|
||||
content: none;
|
||||
}
|
||||
&::after {
|
||||
background-color: @menu-dark-bg;
|
||||
}
|
||||
}
|
||||
&-mix {
|
||||
&::before {
|
||||
background-color: @white;
|
||||
content: ' ';
|
||||
}
|
||||
&::after {
|
||||
background-color: @menu-dark-bg;
|
||||
}
|
||||
}
|
||||
&-realDark {
|
||||
background-color: fade(@menu-dark-bg, 85%);
|
||||
|
||||
&::before {
|
||||
z-index: 1;
|
||||
background-color: fade(@menu-dark-bg, 65%);
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: fade(@menu-dark-bg, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
// 亮色主题
|
||||
&-light {
|
||||
&::before {
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
&::before {
|
||||
z-index: 1;
|
||||
width: 16%;
|
||||
background-color: @menu-dark-bg;
|
||||
content: '';
|
||||
}
|
||||
> .inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background-color: @white;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
bottom: 4px;
|
||||
color: @primary-color;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<h-list :split="false">
|
||||
<h-tooltip>
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">
|
||||
{{ t('app.setting.content-width') }}
|
||||
</span>
|
||||
<template #actions>
|
||||
<h-select
|
||||
size="small"
|
||||
:value="contentWidth"
|
||||
@select="val => handleChange('contentWidth', val)"
|
||||
>
|
||||
<h-select-option v-if="layout === 'side'" value="Fixed">
|
||||
{{ t('app.setting.content-width.fixed') }}
|
||||
</h-select-option>
|
||||
<h-select-option value="Fluid">
|
||||
{{ t('app.setting.content-width.fluid') }}
|
||||
</h-select-option>
|
||||
</h-select>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip placement="left" :title="layout === 'mix' ? t('app.setting.fixedheader.hint') : ''">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">{{ t('app.setting.fixedheader') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:checked="!!fixedHeader"
|
||||
:disabled="layout === 'mix'"
|
||||
@change="checked => handleChange('fixedHeader', checked)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip :title="layout === 'top' ? t('app.setting.fixedsidebar.hint') : ''">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">{{ t('app.setting.fixedsidebar') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:disabled="layout === 'top'"
|
||||
:checked="!!fixSiderbar"
|
||||
@change="checked => handleChange('fixSiderbar', checked)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
|
||||
<h-tooltip placement="left" :title="layout === 'mix' ? '' : t('app.setting.layout.mix.hint')">
|
||||
<h-list-item>
|
||||
<span :style="{ opacity: 1 }">{{ t('app.setting.split.menus') }}</span>
|
||||
<template #actions>
|
||||
<h-switch
|
||||
size="small"
|
||||
:disabled="layout !== 'mix'"
|
||||
:checked="!!splitMenus"
|
||||
@change="checked => handleChange('splitmenus', checked)"
|
||||
/>
|
||||
</template>
|
||||
</h-list-item>
|
||||
</h-tooltip>
|
||||
</h-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { useI18n } from '@crami/locale';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
contentWidth: { type: String as PropType<'Fluid' | 'Fixed'>, default: 'Fluid' },
|
||||
fixedHeader: Boolean,
|
||||
fixSiderbar: Boolean,
|
||||
splitMenus: Boolean,
|
||||
layout: { type: String as PropType<'side' | 'top' | 'mix' | 'left'> },
|
||||
onChange: Function as PropType<(arg: { type: string; value: string }) => void>,
|
||||
},
|
||||
setup(_props, { emit }) {
|
||||
const { t } = useI18n();
|
||||
const handleChange = (type: string, value: any) => {
|
||||
emit('change', { type, value });
|
||||
};
|
||||
|
||||
return {
|
||||
t,
|
||||
handleChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': 'Page style setting',
|
||||
'app.setting.pagestyle.light': 'Light style',
|
||||
'app.setting.pagestyle.dark': 'Dark style',
|
||||
'app.setting.pagestyle.realdark': 'RealDark style',
|
||||
'app.setting.layout.side': 'Side Menu Layout',
|
||||
'app.setting.layout.top': 'Top Menu Layout',
|
||||
'app.setting.layout.mix': 'Mix Layout',
|
||||
'app.setting.layout.leftmenu': 'Left Layout',
|
||||
'app.setting.layout.mix.hint': 'Split Menus',
|
||||
'app.setting.themecolor': 'Theme Color',
|
||||
'app.setting.navigationmode': 'Navigation Mode',
|
||||
'app.setting.content-width': 'Content Width',
|
||||
'app.setting.fixedheader': 'Fixed Header',
|
||||
'app.setting.fixedheader.hint': 'Mix Required fixed header',
|
||||
'app.setting.fixedsidebar': 'Fixed Sidebar',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': 'Split Menus',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': 'Other Settings',
|
||||
'app.setting.weakmode': 'Weak Mode',
|
||||
'app.setting.transitionname': 'TransitionName',
|
||||
'app.setting.multitab': 'Multi Tabs',
|
||||
'app.setting.multitab.fixed': 'Multi Tab Fixed',
|
||||
'app.setting.multitab.fixed.hit': 'Tabs Fixed Required open MultiTab and Fixed Header',
|
||||
'app.setting.unavailable': 'Unavailable',
|
||||
'app.setting.copy': 'Copy Setting',
|
||||
'app.setting.loading': 'Loading theme',
|
||||
'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
|
||||
'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
//# sourceMappingURL=en-US.js.map
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"file":"en-US.js","sourceRoot":"","sources":["en-US.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,uBAAuB,EAAE,oBAAoB;IAC7C,6BAA6B,EAAE,aAAa;IAC5C,4BAA4B,EAAE,YAAY;IAC1C,gCAAgC,EAAE,gBAAgB;IAClD,yBAAyB,EAAE,kBAAkB;IAC7C,wBAAwB,EAAE,iBAAiB;IAC3C,wBAAwB,EAAE,YAAY;IACtC,6BAA6B,EAAE,aAAa;IAC5C,6BAA6B,EAAE,aAAa;IAC5C,wBAAwB,EAAE,aAAa;IACvC,4BAA4B,EAAE,iBAAiB;IAC/C,2BAA2B,EAAE,eAAe;IAC5C,yBAAyB,EAAE,cAAc;IACzC,8BAA8B,EAAE,2BAA2B;IAC3D,0BAA0B,EAAE,eAAe;IAC3C,+BAA+B,EAAE,EAAE;IACnC,yBAAyB,EAAE,aAAa;IACxC,iCAAiC,EAAE,OAAO;IAC1C,iCAAiC,EAAE,OAAO;IAC1C,2BAA2B,EAAE,gBAAgB;IAC7C,sBAAsB,EAAE,WAAW;IACnC,4BAA4B,EAAE,gBAAgB;IAC9C,sBAAsB,EAAE,YAAY;IACpC,4BAA4B,EAAE,iBAAiB;IAC/C,gCAAgC,EAAE,oDAAoD;IACtF,yBAAyB,EAAE,aAAa;IACxC,kBAAkB,EAAE,cAAc;IAClC,qBAAqB,EAAE,eAAe;IACtC,sBAAsB,EAAE,sEAAsE;IAC9F,6BAA6B,EAC3B,6EAA6E;CAChF,CAAC"}
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': 'Page style setting',
|
||||
'app.setting.pagestyle.light': 'Light style',
|
||||
'app.setting.pagestyle.dark': 'Dark style',
|
||||
'app.setting.pagestyle.realdark': 'RealDark style',
|
||||
'app.setting.layout.side': 'Side Menu Layout',
|
||||
'app.setting.layout.top': 'Top Menu Layout',
|
||||
'app.setting.layout.mix': 'Mix Layout',
|
||||
'app.setting.layout.leftmenu': 'Left Layout',
|
||||
'app.setting.layout.mix.hint': 'Split Menus',
|
||||
'app.setting.themecolor': 'Theme Color',
|
||||
'app.setting.navigationmode': 'Navigation Mode',
|
||||
'app.setting.content-width': 'Content Width',
|
||||
'app.setting.fixedheader': 'Fixed Header',
|
||||
'app.setting.fixedheader.hint': 'Mix Required fixed header',
|
||||
'app.setting.fixedsidebar': 'Fixed Sidebar',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': 'Split Menus',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': 'Other Settings',
|
||||
'app.setting.weakmode': 'Weak Mode',
|
||||
'app.setting.transitionname': 'TransitionName',
|
||||
'app.setting.multitab': 'Multi Tabs',
|
||||
'app.setting.multitab.fixed': 'Multi Tab Fixed',
|
||||
'app.setting.multitab.fixed.hit': 'Tabs Fixed Required open MultiTab and Fixed Header',
|
||||
'app.setting.unavailable': 'Unavailable',
|
||||
'app.setting.copy': 'Copy Setting',
|
||||
'app.setting.loading': 'Loading theme',
|
||||
'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
|
||||
'app.setting.production.hint':
|
||||
'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': '整体风格设置',
|
||||
'app.setting.pagestyle.light': '亮色主题风格',
|
||||
'app.setting.pagestyle.dark': '暗色主题风格',
|
||||
'app.setting.pagestyle.realdark': '暗黑模式',
|
||||
'app.setting.layout.side': '侧边菜单布局',
|
||||
'app.setting.layout.top': '顶部菜单布局',
|
||||
'app.setting.layout.mix': '混合布局',
|
||||
'app.setting.layout.leftmenu': '左侧混合布局',
|
||||
'app.setting.layout.mix.hint': '将菜单分割成 Header 和 Side',
|
||||
'app.setting.themecolor': '主题色',
|
||||
'app.setting.navigationmode': '导航模式',
|
||||
'app.setting.content-width': '内容区域宽度',
|
||||
'app.setting.fixedheader': '固定 Header',
|
||||
'app.setting.fixedheader.hint': '混合模式必须开启固定 Header',
|
||||
'app.setting.fixedsidebar': '固定侧边菜单',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': '自动分割菜单',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': '其他设置',
|
||||
'app.setting.weakmode': '色弱模式',
|
||||
'app.setting.transitionname': '路由动画',
|
||||
'app.setting.multitab': '多标签',
|
||||
'app.setting.multitab.fixed': '固定多标签',
|
||||
'app.setting.multitab.fixed.hit': '固定多标签需要先开启多标签并且固定 Header',
|
||||
'app.setting.unavailable': '不可用',
|
||||
'app.setting.copy': '复制设置',
|
||||
'app.setting.loading': '主题加载中',
|
||||
'app.setting.copyinfo': '拷贝成功，请到 src/components/basic-layout/defaultSettings.ts 中替换默认配置',
|
||||
'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
//# sourceMappingURL=zh-CN.js.map
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"file":"zh-CN.js","sourceRoot":"","sources":["zh-CN.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,uBAAuB,EAAE,QAAQ;IACjC,6BAA6B,EAAE,QAAQ;IACvC,4BAA4B,EAAE,QAAQ;IACtC,gCAAgC,EAAE,MAAM;IACxC,yBAAyB,EAAE,QAAQ;IACnC,wBAAwB,EAAE,QAAQ;IAClC,wBAAwB,EAAE,MAAM;IAChC,6BAA6B,EAAE,QAAQ;IACvC,6BAA6B,EAAE,sBAAsB;IACrD,wBAAwB,EAAE,KAAK;IAC/B,4BAA4B,EAAE,MAAM;IACpC,2BAA2B,EAAE,QAAQ;IACrC,yBAAyB,EAAE,WAAW;IACtC,8BAA8B,EAAE,mBAAmB;IACnD,0BAA0B,EAAE,QAAQ;IACpC,+BAA+B,EAAE,EAAE;IACnC,yBAAyB,EAAE,QAAQ;IACnC,iCAAiC,EAAE,OAAO;IAC1C,iCAAiC,EAAE,OAAO;IAC1C,2BAA2B,EAAE,MAAM;IACnC,sBAAsB,EAAE,MAAM;IAC9B,4BAA4B,EAAE,MAAM;IACpC,sBAAsB,EAAE,KAAK;IAC7B,4BAA4B,EAAE,OAAO;IACrC,gCAAgC,EAAE,0BAA0B;IAC5D,yBAAyB,EAAE,KAAK;IAChC,kBAAkB,EAAE,MAAM;IAC1B,qBAAqB,EAAE,OAAO;IAC9B,sBAAsB,EACpB,gEAAgE;IAClE,6BAA6B,EAC3B,6EAA6E;CAChF,CAAC"}
|
||||
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
'app.setting.pagestyle': '整体风格设置',
|
||||
'app.setting.pagestyle.light': '亮色主题风格',
|
||||
'app.setting.pagestyle.dark': '暗色主题风格',
|
||||
'app.setting.pagestyle.realdark': '暗黑模式',
|
||||
'app.setting.layout.side': '侧边菜单布局',
|
||||
'app.setting.layout.top': '顶部菜单布局',
|
||||
'app.setting.layout.mix': '混合布局',
|
||||
'app.setting.layout.leftmenu': '左侧混合布局',
|
||||
'app.setting.layout.mix.hint': '将菜单分割成 Header 和 Side',
|
||||
'app.setting.themecolor': '主题色',
|
||||
'app.setting.navigationmode': '导航模式',
|
||||
'app.setting.content-width': '内容区域宽度',
|
||||
'app.setting.fixedheader': '固定 Header',
|
||||
'app.setting.fixedheader.hint': '混合模式必须开启固定 Header',
|
||||
'app.setting.fixedsidebar': '固定侧边菜单',
|
||||
'app.setting.fixedsidebar.hint': '',
|
||||
'app.setting.split.menus': '自动分割菜单',
|
||||
'app.setting.content-width.fixed': 'Fixed',
|
||||
'app.setting.content-width.fluid': 'Fluid',
|
||||
'app.setting.othersettings': '其他设置',
|
||||
'app.setting.weakmode': '色弱模式',
|
||||
'app.setting.transitionname': '路由动画',
|
||||
'app.setting.multitab': '多标签',
|
||||
'app.setting.multitab.fixed': '固定多标签',
|
||||
'app.setting.multitab.fixed.hit': '固定多标签需要先开启多标签并且固定 Header',
|
||||
'app.setting.unavailable': '不可用',
|
||||
'app.setting.copy': '复制设置',
|
||||
'app.setting.loading': '主题加载中',
|
||||
'app.setting.copyinfo':
|
||||
'拷贝成功，请到 src/components/basic-layout/defaultSettings.ts 中替换默认配置',
|
||||
'app.setting.production.hint':
|
||||
'Setting panel shows in development environment only, please manually modify',
|
||||
};
|
||||
30
packages/icpx-ruler/src/components/table/drag-icon.vue
Normal file
30
packages/icpx-ruler/src/components/table/drag-icon.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<span
|
||||
class="anticon ant-pro-table-column-drag-icon"
|
||||
role="img"
|
||||
aria-label="info-darg-icon"
|
||||
:style="{
|
||||
paddingRight: 6,
|
||||
cursor: 'move',
|
||||
}"
|
||||
>
|
||||
<svg width="1em" height="1em" viewBox="0 0 8 16" fill="currentColor">
|
||||
<g id="surface5">
|
||||
<path
|
||||
:style="{
|
||||
fillOpacity: 1,
|
||||
fillRule: 'nonzero',
|
||||
stroke: 'none',
|
||||
}"
|
||||
d="M 5 4.003906 C 5 3.449219 5.449219 3 6.003906 3 C 6.558594 3 7.007812 3.449219 7.007812 4.003906 C 7.007812 4.558594 6.558594 5.007812 6.003906 5.007812 C 5.449219 5.007812 5 4.558594 5 4.003906 Z M 5 8.25 C 5 7.695312 5.449219 7.246094 6.003906 7.246094 C 6.558594 7.246094 7.007812 7.695312 7.007812 8.25 C 7.007812 8.804688 6.558594 9.253906 6.003906 9.253906 C 5.449219 9.253906 5 8.804688 5 8.25 Z M 5 12.496094 C 5 11.941406 5.449219 11.492188 6.003906 11.492188 C 6.558594 11.492188 7.007812 11.941406 7.007812 12.496094 C 7.007812 13.050781 6.558594 13.5 6.003906 13.5 C 5.449219 13.5 5 13.050781 5 12.496094 Z M 9.554688 4.003906 C 9.554688 3.449219 10.003906 3 10.558594 3 C 11.113281 3 11.5625 3.449219 11.5625 4.003906 C 11.5625 4.558594 11.113281 5.007812 10.558594 5.007812 C 10.003906 5.007812 9.554688 4.558594 9.554688 4.003906 Z M 9.554688 8.25 C 9.554688 7.695312 10.003906 7.246094 10.558594 7.246094 C 11.113281 7.246094 11.5625 7.695312 11.5625 8.25 C 11.5625 8.804688 11.113281 9.253906 10.558594 9.253906 C 10.003906 9.253906 9.554688 8.804688 9.554688 8.25 Z M 9.554688 12.496094 C 9.554688 11.941406 10.003906 11.492188 10.558594 11.492188 C 11.113281 11.492188 11.5625 11.941406 11.5625 12.496094 C 11.5625 13.050781 11.113281 13.5 10.558594 13.5 C 10.003906 13.5 9.554688 13.050781 9.554688 12.496094 Z M 9.554688 12.496094 "
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'DragIcon',
|
||||
};
|
||||
</script>
|
||||
108
packages/icpx-ruler/src/components/table/pro-table.less
Normal file
108
packages/icpx-ruler/src/components/table/pro-table.less
Normal file
@ -0,0 +1,108 @@
|
||||
@pro-table-prefix-cls: ~'@{ant-prefix}-pro-table';
|
||||
|
||||
/* base table */
|
||||
.@{pro-table-prefix-cls} {
|
||||
.@{ant-prefix}-pagination {
|
||||
padding: 0 24px;
|
||||
}
|
||||
&-column-setting-overlay {
|
||||
.@{ant-prefix}-popover-inner-content {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
.ant-pro-table-row-striped {
|
||||
background: @background-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
/* search */
|
||||
.@{pro-table-prefix-cls}-search {
|
||||
margin-bottom: 16px;
|
||||
padding: 24px 24px 0;
|
||||
background: @component-background;
|
||||
|
||||
.@{ant-prefix}-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-form-item-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.@{ant-prefix}-form-horizontal {
|
||||
.@{ant-prefix}-form-item-control-wrapper {
|
||||
flex: 1 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* toolbar */
|
||||
.@{pro-table-prefix-cls}-list-toolbar {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-list-toolbar-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
padding: 0 24px;
|
||||
line-height: 64px;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-list-toolbar-left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-list-toolbar-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-list-toolbar-title {
|
||||
color: @text-color;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Medium;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-list-toolbar-divider {
|
||||
margin-right: -8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-list-toolbar-setting-item {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* table column setting */
|
||||
.@{pro-table-prefix-cls}-column-setting-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-column-setting-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 4px 16px 4px 0;
|
||||
|
||||
> span.anticon {
|
||||
padding-right: 6px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-checkbox-wrapper {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.@{pro-table-prefix-cls}-drag-ghost {
|
||||
box-shadow: 1px 1px 5px 2px @shadow-color;
|
||||
cursor: move;
|
||||
transition: 0.18s ease;
|
||||
}
|
||||
.@{pro-table-prefix-cls}-drop-ghost {
|
||||
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0);
|
||||
}
|
||||
.@{pro-table-prefix-cls}-column-drag-icon {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
Reference in New Issue
Block a user