refactor: use unocss
xingyu
parent
ceec03d98d
commit
ce6be02a15
|
|
@ -6,6 +6,7 @@
|
|||
"stylelint.vscode-stylelint",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"usernamehw.errorlens",
|
||||
"mrmlnc.vscode-less",
|
||||
"lokalise.i18n-ally",
|
||||
"redhat.vscode-yaml",
|
||||
|
|
|
|||
|
|
@ -66,6 +66,12 @@
|
|||
"source.fixAll.eslint": true,
|
||||
"source.organizeImports": false
|
||||
},
|
||||
"eslint.rules.customizations": [
|
||||
{
|
||||
"rule": "@stylistic/*",
|
||||
"severity": "off"
|
||||
}
|
||||
],
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
|
|
@ -82,7 +88,7 @@
|
|||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
|
||||
},
|
||||
"[typescriptreact]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
|
|
@ -166,6 +172,9 @@
|
|||
"*.env": "$(capture).env.*",
|
||||
"package.json": ".hintrc,pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"
|
||||
},
|
||||
"eslint.codeAction.showDocumentation": {
|
||||
"enable": true
|
||||
},
|
||||
"terminal.integrated.scrollback": 10000,
|
||||
"nuxt.isNuxtApp": false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,8 +29,14 @@ function toggleDarkMode() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
|
||||
<div :class="`${prefixCls}-inner`" />
|
||||
<div
|
||||
v-if="getShowDarkModeToggle" :class="getClass"
|
||||
class="relative mr-auto h-6.5 w-12.5 flex cursor-pointer items-center justify-between rounded-4.5 bg-black px-1.5"
|
||||
@click="toggleDarkMode"
|
||||
>
|
||||
<div
|
||||
class="dark:(transform translateX(calc(100% + 2px))) absolute z-1 h-4.5 w-4.5 rounded-1/2 bg-white will-change-transform"
|
||||
/>
|
||||
<SvgIcon size="14" name="sun" />
|
||||
<SvgIcon size="14" name="moon" />
|
||||
</div>
|
||||
|
|
@ -46,29 +52,11 @@ html[data-theme='dark'] {
|
|||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
padding: 0 6px;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
background-color: #151515;
|
||||
border-radius: 30px;
|
||||
|
||||
&-inner {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.5s,
|
||||
background-color 0.5s;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const { t } = useI18n()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${prefixCls}`">
|
||||
<div class="relative h-10 flex flex-shrink-0 items-center border-t-1 rounded-bl-2xl px-4 py-0 dark:border-light-100">
|
||||
<AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
|
||||
<span>{{ t('component.app.toSearch') }}</span>
|
||||
<AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
|
||||
|
|
@ -23,18 +23,6 @@ const { t } = useI18n()
|
|||
@prefix-cls: ~'@{namespace}-app-search-footer';
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
// color: var(--text-color);
|
||||
// background-color: var(--component-background);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-radius: 0 0 16px 16px;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { InfoCircleOutlined } from '@ant-design/icons-vue'
|
|||
import { getPopupContainer } from '@/utils'
|
||||
import { isArray, isString } from '@/utils/is'
|
||||
import { getSlot } from '@/utils/helper/tsxHelper'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
const props = {
|
||||
/**
|
||||
|
|
@ -44,7 +43,6 @@ export default defineComponent({
|
|||
components: { Tooltip },
|
||||
props,
|
||||
setup(props, { slots }) {
|
||||
const { prefixCls } = useDesign('basic-help')
|
||||
|
||||
const getTooltipStyle = computed((): CSSProperties => ({ color: props.color, fontSize: props.fontSize }))
|
||||
|
||||
|
|
@ -74,14 +72,14 @@ export default defineComponent({
|
|||
return () => {
|
||||
return (
|
||||
<Tooltip
|
||||
overlayClassName={`${prefixCls}__wrap`}
|
||||
overlayClassName="overlay-class"
|
||||
title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
|
||||
autoAdjustOverflow={true}
|
||||
overlayStyle={unref(getOverlayStyle)}
|
||||
placement={props.placement as 'right'}
|
||||
getPopupContainer={() => getPopupContainer()}
|
||||
>
|
||||
<span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
|
||||
<span class="ml-1.5 inline-block cursor-pointer text-sm">{getSlot(slots) || <InfoCircleOutlined />}</span>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
|
@ -89,19 +87,10 @@ export default defineComponent({
|
|||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-basic-help';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
&__wrap {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
<style>
|
||||
.overlay-class {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const props = {
|
|||
const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
|
||||
const { item } = props
|
||||
return (
|
||||
<span style="display: inline-block; width: 100%; " class="px-4" onClick={props.handler.bind(null, item)}>
|
||||
<span class="inline-block w-full px-4" onClick={props.handler.bind(null, item)}>
|
||||
{props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
|
||||
<span>{item.label}</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { ref, watch } from 'vue'
|
|||
import { Input } from 'ant-design-vue'
|
||||
import CronTabModal from './CronTabModal.vue'
|
||||
import { cronEmits, cronProps } from './cron.data'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useModal } from '@/components/Modal'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { Icon } from '@/components/Icon'
|
||||
|
|
@ -14,7 +13,6 @@ const props = defineProps({
|
|||
exeStartTime: propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object]).def(0),
|
||||
})
|
||||
const emit = defineEmits([...cronEmits])
|
||||
const { prefixCls } = useDesign('cron-input')
|
||||
const [registerModal, { openModal }] = useModal()
|
||||
const editCronValue = ref(props.value)
|
||||
|
||||
|
|
@ -37,11 +35,11 @@ function showConfigModal() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="`${prefixCls}`">
|
||||
<div>
|
||||
<Input v-model:value="editCronValue" :placeholder="placeholder" :disabled="disabled">
|
||||
<template #addonAfter>
|
||||
<a class="open-btn" :disabled="disabled ? 'disabled' : null" @click="showConfigModal">
|
||||
<Icon icon="ant-design:setting-outlined" />
|
||||
<a class="cursor-pointer" :disabled="disabled ? 'disabled' : null" @click="showConfigModal">
|
||||
<Icon class="relative right-0.5 top-0.25" icon="ant-design:setting-outlined" />
|
||||
<span>选择</span>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -56,19 +54,3 @@ function showConfigModal() {
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-cron-input';
|
||||
|
||||
.@{prefix-cls} {
|
||||
a.open-btn {
|
||||
cursor: pointer;
|
||||
|
||||
.app-iconify {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { computed, ref, unref, watch, watchEffect } from 'vue'
|
||||
import { Avatar } from 'ant-design-vue'
|
||||
import CopperModal from './CopperModal.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useModal } from '@/components/Modal'
|
||||
|
|
@ -65,9 +66,9 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
|
|||
<div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
|
||||
<Icon icon="ant-design:cloud-upload-outlined" :size="getIconWidth" :style="getImageWrapperStyle" color="#d6d6d6" />
|
||||
</div>
|
||||
<img v-if="sourceValue" :src="sourceValue" alt="avatar">
|
||||
<Avatar v-if="sourceValue" :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }" :src="sourceValue" alt="avatar" />
|
||||
</div>
|
||||
<a-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" v-bind="btnProps" @click="openModal">
|
||||
<a-button v-if="showBtn" class="mx-auto my-2.5" v-bind="btnProps" @click="openModal">
|
||||
{{ btnText ? btnText : t('component.cropper.selectImage') }}
|
||||
</a-button>
|
||||
|
||||
|
|
@ -113,9 +114,5 @@ defineExpose({ openModal: openModal.bind(null, true), closeModal })
|
|||
&-image-mask:hover {
|
||||
opacity: 40;
|
||||
}
|
||||
|
||||
&-upload-btn {
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import type { CSSProperties } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { footerProps } from '../props'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'BasicDrawerFooter' })
|
||||
|
||||
|
|
@ -15,8 +14,6 @@ const props = defineProps({
|
|||
})
|
||||
const emit = defineEmits(['ok', 'close'])
|
||||
|
||||
const { prefixCls } = useDesign('basic-drawer-footer')
|
||||
|
||||
const getStyle = computed((): CSSProperties => {
|
||||
const heightStr = `${props.height}`
|
||||
return {
|
||||
|
|
@ -35,14 +32,21 @@ function handleClose() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showFooter || $slots.footer" :class="prefixCls" :style="getStyle">
|
||||
<div
|
||||
v-if="showFooter || $slots.footer"
|
||||
class="absolute bottom-0 w-full border-t-1 border-light-200 bg-white pl-5 pr-3 dark:bg-dark"
|
||||
:style="getStyle"
|
||||
>
|
||||
<template v-if="!$slots.footer">
|
||||
<slot name="insertFooter" />
|
||||
<a-button v-if="showCancelBtn" v-bind="cancelButtonProps" class="mr-2" @click="handleClose">
|
||||
{{ cancelText }}
|
||||
</a-button>
|
||||
<slot name="centerFooter" />
|
||||
<a-button v-if="showOkBtn" :type="okType" v-bind="okButtonProps" class="mr-2" :loading="confirmLoading" @click="handleOk">
|
||||
<a-button
|
||||
v-if="showOkBtn" :type="okType" v-bind="okButtonProps" class="mr-2" :loading="confirmLoading"
|
||||
@click="handleOk"
|
||||
>
|
||||
{{ okText }}
|
||||
</a-button>
|
||||
<slot name="appendFooter" />
|
||||
|
|
@ -53,21 +57,3 @@ function handleClose() {
|
|||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-basic-drawer-footer';
|
||||
@footer-height: 60px;
|
||||
.@{prefix-cls} {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 12px 0 20px;
|
||||
text-align: right;
|
||||
background-color: var(--component-background);
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
import { BasicTitle } from '@/components/Basic'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
defineOptions({ name: 'BasicDrawerHeader' })
|
||||
|
|
@ -13,52 +12,27 @@ defineProps({
|
|||
})
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const { prefixCls } = useDesign('basic-drawer-header')
|
||||
|
||||
function handleClose() {
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicTitle v-if="!isDetail" :class="prefixCls">
|
||||
<BasicTitle v-if="!isDetail" class="h-full flex items-center">
|
||||
<slot name="title" />
|
||||
{{ !$slots.title ? title : '' }}
|
||||
</BasicTitle>
|
||||
|
||||
<div v-else :class="[prefixCls, `${prefixCls}--detail`]">
|
||||
<span :class="`${prefixCls}__twrap`">
|
||||
<div v-else>
|
||||
<span class="flex-1">
|
||||
<span v-if="showDetailBack" @click="handleClose">
|
||||
<ArrowLeftOutlined :class="`${prefixCls}__back`" />
|
||||
<ArrowLeftOutlined class="cursor-pointer px-3" />
|
||||
</span>
|
||||
<span v-if="title">{{ title }}</span>
|
||||
</span>
|
||||
|
||||
<span :class="`${prefixCls}__toolbar`">
|
||||
<span class="pr-12.5">
|
||||
<slot name="titleToolbar" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-basic-drawer-header';
|
||||
@footer-height: 60px;
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
&__back {
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__twrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -280,11 +280,11 @@ function getFileName(path) {
|
|||
<Upload
|
||||
:headers="headers"
|
||||
:multiple="multiple"
|
||||
:action="uploadUrl as any"
|
||||
:action="uploadUrl"
|
||||
:file-list="fileList"
|
||||
:disabled="disabled"
|
||||
v-bind="bindProps"
|
||||
@remove="onRemove as any"
|
||||
@remove="onRemove"
|
||||
@change="onFileChange"
|
||||
@preview="onFilePreview"
|
||||
>
|
||||
|
|
@ -305,7 +305,6 @@ function getFileName(path) {
|
|||
</template>
|
||||
|
||||
<style lang="less">
|
||||
//noinspection LessUnresolvedVariable
|
||||
@prefix-cls: ~'@{namespace}-upload';
|
||||
|
||||
.@{prefix-cls} {
|
||||
|
|
@ -323,12 +322,9 @@ function getFileName(path) {
|
|||
}
|
||||
}
|
||||
|
||||
/* update-begin-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全 */
|
||||
.upload-download-handler {
|
||||
right: 6px !important;
|
||||
}
|
||||
|
||||
/* update-end-author:taoyan date:2022-5-24 for:VUEN-1093详情界面 图片下载按钮显示不全 */
|
||||
}
|
||||
|
||||
.ant-upload-list-item {
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export default defineComponent({
|
|||
|
||||
<template>
|
||||
<div class="v-form-container">
|
||||
<Form ref="eFormModel" class="v-form-model" :model="formModel" v-bind="formModelProps">
|
||||
<Form ref="eFormModel" class="overflow-hidden" :model="formModel" v-bind="formModelProps">
|
||||
<Row>
|
||||
<FormRender
|
||||
v-for="(schema, index) of noHiddenList"
|
||||
|
|
@ -143,9 +143,3 @@ export default defineComponent({
|
|||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-form-model {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -52,10 +52,10 @@ function deleteGridOptions(index: number) {
|
|||
</div>
|
||||
<div v-else>
|
||||
<div v-for="(item, index) of formConfig.currentItem!.componentProps![key]" :key="index">
|
||||
<div class="options-box">
|
||||
<div class="mb-1.5 flex items-center">
|
||||
<Input v-model:value="item.label" />
|
||||
<Input v-model:value="item.value" class="options-value" />
|
||||
<a class="options-delete" @click="deleteOptions(index)">
|
||||
<Input v-model:value="item.value" class="mx-2" />
|
||||
<a class="h-7.5 w-7.5 rounded-full bg-light-50 text-center text-gray-500 hover:bg-red-500" @click="deleteOptions(index)">
|
||||
<Icon icon="ant-design:delete-outlined" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -67,30 +67,3 @@ function deleteGridOptions(index: number) {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.options-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.options-value {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.options-delete {
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ defineExpose({ showModal })
|
|||
取消
|
||||
</a-button>
|
||||
<Upload
|
||||
class="upload-button"
|
||||
class="mx-2.5"
|
||||
:before-upload="beforeUpload"
|
||||
:show-upload-list="false"
|
||||
accept="application/json"
|
||||
|
|
@ -124,9 +124,3 @@ defineExpose({ showModal })
|
|||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.upload-button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -72,10 +72,10 @@ export default defineComponent({
|
|||
<div class="v-json-box">
|
||||
<CodeEditor ref="myEditor" :value="editorJson" :mode="MODE.JSON" />
|
||||
</div>
|
||||
<div class="copy-btn-box">
|
||||
<div class="pt-2 text-center">
|
||||
<a-button
|
||||
type="primary"
|
||||
class="copy-btn"
|
||||
class="mr-2"
|
||||
data-clipboard-action="copy"
|
||||
:data-clipboard-text="editorJson"
|
||||
@click="handleCopyJson"
|
||||
|
|
@ -88,15 +88,3 @@ export default defineComponent({
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// modal复制按钮样式
|
||||
.copy-btn-box {
|
||||
padding-top: 8px;
|
||||
text-align: center;
|
||||
|
||||
.copy-btn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ import PropsPanel from './modules/PropsPanel.vue'
|
|||
import ImportJsonModal from './components/ImportJsonModal.vue'
|
||||
import CodeModal from './components/CodeModal.vue'
|
||||
import { globalConfigState } from './config/formItemPropsConfig'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { CollapseContainer } from '@/components/Container/index'
|
||||
import 'codemirror/mode/javascript/javascript'
|
||||
|
||||
|
|
@ -29,7 +28,6 @@ defineProps({
|
|||
default: 'v-form-antd表单设计器',
|
||||
},
|
||||
})
|
||||
const { prefixCls } = useDesign('form-design')
|
||||
// 子组件实例
|
||||
const propsPanel = ref<null | IPropsPanel>(null)
|
||||
const jsonModal = ref<null | IToolbarMethods>(null)
|
||||
|
|
@ -251,7 +249,7 @@ provide<IFormDesignMethods>('formDesignMethods', {
|
|||
<template>
|
||||
<Layout>
|
||||
<LayoutSider
|
||||
:class="`left ${prefixCls}-sider`"
|
||||
class="bg-white dark:bg-black"
|
||||
collapsible
|
||||
collapsed-width="0"
|
||||
width="270"
|
||||
|
|
@ -302,7 +300,7 @@ provide<IFormDesignMethods>('formDesignMethods', {
|
|||
/>
|
||||
</LayoutContent>
|
||||
<LayoutSider
|
||||
:class="`right ${prefixCls}-sider`"
|
||||
class="bg-white dark:bg-black"
|
||||
collapsible
|
||||
:reverse-arrow="true"
|
||||
collapsed-width="0"
|
||||
|
|
@ -327,19 +325,3 @@ provide<IFormDesignMethods>('formDesignMethods', {
|
|||
<VFormPreview ref="eFormPreview" :form-config="formConfig" />
|
||||
<VFormPreview2 ref="eFormPreview2" :form-config="formConfig" />
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-form-design';
|
||||
|
||||
[data-theme='dark'] {
|
||||
.@{prefix-cls}-sider {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='light'] {
|
||||
.@{prefix-cls}-sider {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const { getCalcContentWidth } = useMenuSetting()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls" :style="{ width: getCalcContentWidth }">
|
||||
<div :class="`${prefixCls}__left`">
|
||||
<div class="fixed bottom-0 right-0 z-99 w-full flex items-center border-t-1 px-6 text-base/44" :style="{ width: getCalcContentWidth }">
|
||||
<div class="flex-1-1">
|
||||
<slot name="left" />
|
||||
</div>
|
||||
<slot />
|
||||
|
|
@ -24,24 +24,10 @@ const { getCalcContentWidth } = useMenuSetting()
|
|||
@prefix-cls: ~'@{namespace}-page-footer';
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: @page-footer-z-index;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
line-height: 44px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
box-shadow:
|
||||
0 -6px 16px -8px rgb(0 0 0 / 8%),
|
||||
0 -9px 28px 0 rgb(0 0 0 / 5%),
|
||||
0 -12px 48px 16px rgb(0 0 0 / 3%);
|
||||
transition: width 0.2s;
|
||||
|
||||
&__left {
|
||||
flex: 1 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -316,7 +316,7 @@ emit('register', tableAction, formActions)
|
|||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-basic-table';
|
||||
|
||||
[data-theme='dark'] {
|
||||
html[data-theme='dark'] {
|
||||
.ant-table-tbody > tr:hover.ant-table-row-selected > td,
|
||||
.ant-table-tbody > tr.ant-table-row-selected td {
|
||||
background-color: #262626;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@import "transition/index.less";
|
||||
@import "var/index.less";
|
||||
@import "public.less";
|
||||
// @import "ant/index.less";
|
||||
@import "./theme.less";
|
||||
@import "./entry.css";
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { openWindow } from '@/utils'
|
|||
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useRootSetting } from '@/hooks/setting/useRootSetting'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'LayoutFooter' })
|
||||
|
||||
|
|
@ -22,7 +21,6 @@ const Footer = Layout.Footer
|
|||
const { t } = useI18n()
|
||||
const { getShowFooter } = useRootSetting()
|
||||
const { currentRoute } = useRouter()
|
||||
const { prefixCls } = useDesign('layout-footer')
|
||||
|
||||
const footerRef = ref<ComponentRef>(null)
|
||||
const { setFooterHeight } = useLayoutHeight()
|
||||
|
|
@ -40,43 +38,15 @@ const getShowLayoutFooter = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Footer v-if="getShowLayoutFooter" ref="footerRef" :class="prefixCls">
|
||||
<div :class="`${prefixCls}__links`">
|
||||
<a @click="openWindow(SITE_URL)">外包咨询</a>
|
||||
<Footer v-if="getShowLayoutFooter" ref="footerRef" class="text-center text-[var(--normal-text)]">
|
||||
<div class="mb-2">
|
||||
<a class="text-[var(--normal-text)] hover:text-[var(--hover-text)]" @click="openWindow(SITE_URL)">外包咨询</a>
|
||||
|
||||
<GithubFilled :class="`${prefixCls}__github`" @click="openWindow(GITHUB_URL)" />
|
||||
<GithubFilled class="mx-7.5 hover:text-[var(--hover-text)]" @click="openWindow(GITHUB_URL)" />
|
||||
|
||||
<a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
|
||||
<a class="text-[var(--normal-text)] hover:text-[var(--hover-text)]" @click="openWindow(DOC_URL)">{{
|
||||
t('layout.footer.onlineDocument') }}</a>
|
||||
</div>
|
||||
<div>Copyright ©2023 {{ SITE_TITLE }}</div>
|
||||
</Footer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-layout-footer';
|
||||
|
||||
.@{prefix-cls} {
|
||||
color: var(--normal-text);
|
||||
text-align: center;
|
||||
|
||||
&__links {
|
||||
margin-bottom: 8px;
|
||||
|
||||
a {
|
||||
color: var(--normal-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__github {
|
||||
margin: 0 30px;
|
||||
|
||||
&:hover {
|
||||
color: var(--hover-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { computed, ref, unref, watch } from 'vue'
|
||||
import { Avatar, List, Tag, Typography } from 'ant-design-vue'
|
||||
import type { ListItem } from './data'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { isNumber } from '@/utils/is'
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -31,7 +30,6 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
const emit = defineEmits(['update:currentPage'])
|
||||
const { prefixCls } = useDesign('header-notify-list')
|
||||
const current = ref(props.currentPage || 1)
|
||||
const getData = computed(() => {
|
||||
const { pageSize, list } = props
|
||||
|
|
@ -72,12 +70,12 @@ function handleTitleClick(item: ListItem) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<List :class="prefixCls" bordered :pagination="getPagination">
|
||||
<List class="display-none" bordered :pagination="getPagination">
|
||||
<template v-for="item in getData" :key="item.id">
|
||||
<List.Item class="list-item">
|
||||
<List.Item class="cursor-pointer overflow-hidden p-1.5 transition-all delay-300">
|
||||
<List.Item.Meta>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<div class="mb-2 font-normal">
|
||||
<Typography.Paragraph
|
||||
style="width: 100%; margin-bottom: 0 !important"
|
||||
:style="{ cursor: isTitleClickable ? 'pointer' : '' }"
|
||||
|
|
@ -86,8 +84,8 @@ function handleTitleClick(item: ListItem) {
|
|||
:content="item.title"
|
||||
@click="handleTitleClick(item)"
|
||||
/>
|
||||
<div v-if="item.extra" class="extra">
|
||||
<Tag class="tag" :color="item.color">
|
||||
<div v-if="item.extra" class="float-right mr-0 font-normal -mt-0.375">
|
||||
<Tag class="mr-0" :color="item.color">
|
||||
{{ item.extra }}
|
||||
</Tag>
|
||||
</div>
|
||||
|
|
@ -95,20 +93,20 @@ function handleTitleClick(item: ListItem) {
|
|||
</template>
|
||||
|
||||
<template #avatar>
|
||||
<Avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
|
||||
<Avatar v-if="item.avatar" class="mt-1" :src="item.avatar" />
|
||||
<span v-else> {{ item.avatar }}</span>
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<div>
|
||||
<div v-if="item.description" class="description">
|
||||
<div v-if="item.description" class="text-xs/18">
|
||||
<Typography.Paragraph
|
||||
style="width: 100%; margin-bottom: 0 !important"
|
||||
:ellipsis="$props.descRows && $props.descRows > 0 ? { rows: $props.descRows, tooltip: !!item.description } : false"
|
||||
:content="item.description"
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime">
|
||||
<div class="mt-1 text-xs/18">
|
||||
{{ item.datetime }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -118,55 +116,3 @@ function handleTitleClick(item: ListItem) {
|
|||
</template>
|
||||
</List>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-header-notify-list';
|
||||
|
||||
.@{prefix-cls} {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep(.ant-pagination-disabled) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.title {
|
||||
margin-bottom: 8px;
|
||||
font-weight: normal;
|
||||
|
||||
.extra {
|
||||
float: right;
|
||||
margin-top: -1.5px;
|
||||
margin-right: 0;
|
||||
font-weight: normal;
|
||||
|
||||
.tag {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,5 +33,3 @@ onMounted(async () => {
|
|||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less"></style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import LayoutSideBar from './sider/index.vue'
|
|||
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
|
||||
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
|
||||
import { useAppInject } from '@/hooks/web/useAppInject'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useLockPage } from '@/hooks/web/useLockPage'
|
||||
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
|
||||
|
||||
|
|
@ -18,7 +17,6 @@ defineOptions({ name: 'DefaultLayout' })
|
|||
const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'))
|
||||
const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'))
|
||||
|
||||
const { prefixCls } = useDesign('default-layout')
|
||||
const { getIsMobile } = useAppInject()
|
||||
const { getShowFullHeaderRef } = useHeaderSetting()
|
||||
const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting()
|
||||
|
|
@ -36,12 +34,12 @@ const layoutClass = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Layout :class="prefixCls" v-bind="lockEvents">
|
||||
<Layout class="min-h-full w-full flex flex-col" v-bind="lockEvents">
|
||||
<LayoutFeatures />
|
||||
<LayoutHeader v-if="getShowFullHeaderRef" fixed />
|
||||
<Layout :class="[layoutClass]">
|
||||
<LayoutSideBar v-if="getShowSidebar || getIsMobile" />
|
||||
<Layout :class="`${prefixCls}-main`">
|
||||
<Layout class="ml-0.25 w-full">
|
||||
<LayoutMultipleHeader />
|
||||
<LayoutContent />
|
||||
<LayoutFooter />
|
||||
|
|
@ -49,19 +47,3 @@ const layoutClass = computed(() => {
|
|||
</Layout>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-default-layout';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
&-main {
|
||||
width: 100%;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { InputNumber } from 'ant-design-vue'
|
||||
import { baseHandler } from '../handler'
|
||||
import type { HandlerEnum } from '../enum'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'InputNumberItem' })
|
||||
|
||||
|
|
@ -14,7 +13,6 @@ const props = defineProps({
|
|||
type: String,
|
||||
},
|
||||
})
|
||||
const { prefixCls } = useDesign('setting-input-number-item')
|
||||
|
||||
function handleChange(e) {
|
||||
props.event && baseHandler(props.event, e)
|
||||
|
|
@ -22,22 +20,8 @@ function handleChange(e) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<div class="my-4 flex justify-between">
|
||||
<span> {{ title }}</span>
|
||||
<InputNumber v-bind="$attrs" :class="`${prefixCls}-input-number`" @change="handleChange" />
|
||||
<InputNumber v-bind="$attrs" class="max-w-32 w-30" @change="handleChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-setting-input-number-item';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
|
||||
&-input-number {
|
||||
width: 126px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { computed } from 'vue'
|
|||
import { Select } from 'ant-design-vue'
|
||||
import { baseHandler } from '../handler'
|
||||
import type { HandlerEnum } from '../enum'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
|
||||
defineOptions({ name: 'SelectItem' })
|
||||
|
||||
|
|
@ -29,33 +28,19 @@ const props = defineProps({
|
|||
default: () => [],
|
||||
},
|
||||
})
|
||||
const { prefixCls } = useDesign('setting-select-item')
|
||||
const getBindValue = computed(() => {
|
||||
return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {}
|
||||
})
|
||||
|
||||
function handleChange(e: ChangeEvent) {
|
||||
function handleChange(e) {
|
||||
props.event && baseHandler(props.event, e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<div class="my-4 flex justify-between">
|
||||
<span> {{ title }}</span>
|
||||
<Select v-bind="getBindValue" :class="`${prefixCls}-select`" :disabled="disabled" :options="options" @change="handleChange as any" />
|
||||
<Select v-bind="getBindValue" class="max-w-32 w-30" :disabled="disabled" :options="options" @change="handleChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-setting-select-item';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
|
||||
&-select {
|
||||
width: 126px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import { usePermissionStore } from '@/store/modules/permission'
|
|||
import { useMultipleTabStore } from '@/store/modules/multipleTab'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useMessage } from '@/hooks/web/useMessage'
|
||||
import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard'
|
||||
|
|
@ -22,7 +21,6 @@ import { updateSidebarBgColor } from '@/logics/theme/updateBackground'
|
|||
defineOptions({ name: 'SettingFooter' })
|
||||
|
||||
const permissionStore = usePermissionStore()
|
||||
const { prefixCls } = useDesign('setting-footer')
|
||||
const { t } = useI18n()
|
||||
const { createSuccessModal, createMessage } = useMessage()
|
||||
const tabStore = useMultipleTabStore()
|
||||
|
|
@ -63,7 +61,7 @@ function handleClearAndRedo() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<div class="flex flex-col items-center">
|
||||
<a-button type="primary" block @click="handleCopy">
|
||||
<CopyOutlined class="mr-2" />
|
||||
{{ t('layout.setting.copyBtn') }}
|
||||
|
|
@ -80,13 +78,3 @@ function handleClearAndRedo() {
|
|||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-setting-footer';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { computed } from 'vue'
|
|||
import { Switch } from 'ant-design-vue'
|
||||
import { baseHandler } from '../handler'
|
||||
import type { HandlerEnum } from '../enum'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
defineOptions({ name: 'SwitchItem' })
|
||||
|
|
@ -23,7 +22,6 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
},
|
||||
})
|
||||
const { prefixCls } = useDesign('setting-switch-item')
|
||||
const { t } = useI18n()
|
||||
|
||||
const getBindValue = computed(() => {
|
||||
|
|
@ -35,7 +33,7 @@ function handleChange(e) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls">
|
||||
<div class="my-4 flex justify-between">
|
||||
<span> {{ title }}</span>
|
||||
<Switch
|
||||
v-bind="getBindValue"
|
||||
|
|
@ -46,13 +44,3 @@ function handleChange(e) {
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-setting-switch-item';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const title = computed(() => globSetting?.title ?? '')
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="prefixCls" class="relative h-full w-full px-4">
|
||||
<div :class="prefixCls" class="relative h-full min-h-full w-full overflow-hidden px-4">
|
||||
<div class="absolute right-4 top-4 flex items-center">
|
||||
<AppDarkModeToggle v-if="!sessionTimeout" class="enter-x mr-2" />
|
||||
<AppLocalePicker v-if="!sessionTimeout && showLocale" class="enter-x xl:text-gray-600" :show-text="false" />
|
||||
|
|
@ -108,9 +108,6 @@ html[data-theme='dark'] {
|
|||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: @screen-xl) {
|
||||
background-color: #293146;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import Login from './Login.vue'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { usePermissionStore } from '@/store/modules/permission'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { PermissionModeEnum } from '@/enums/appEnum'
|
||||
|
||||
const { prefixCls } = useDesign('st-login')
|
||||
const userStore = useUserStore()
|
||||
const permissionStore = usePermissionStore()
|
||||
const appStore = useAppStore()
|
||||
|
|
@ -36,20 +34,8 @@ onBeforeUnmount(() => {
|
|||
|
||||
<template>
|
||||
<transition>
|
||||
<div :class="prefixCls">
|
||||
<div class="fixed z-9999999 h-full w-full bg-[var(--component-background)]">
|
||||
<Login session-timeout />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-st-login';
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: fixed;
|
||||
z-index: 9999999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--component-background);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@ onMounted(async () => {
|
|||
<List.Item>
|
||||
<List.Item.Meta>
|
||||
<template #avatar>
|
||||
<Icon v-if="item.avatar" class="avatar" :icon="item.avatar" :color="item.color" />
|
||||
<Icon v-if="item.avatar" class="text-4xl" :icon="item.avatar" :color="item.color" />
|
||||
</template>
|
||||
<template #title>
|
||||
{{ item.title }}
|
||||
<a-button v-if="item.extra" type="link" size="small" class="extra">
|
||||
<a-button v-if="item.extra" type="link" size="small" class="float-right mr-7.5 mt-2.5 cursor-pointer">
|
||||
{{ item.extra }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
|
@ -49,16 +49,3 @@ onMounted(async () => {
|
|||
</List>
|
||||
</CollapseContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.avatar {
|
||||
font-size: 40px !important;
|
||||
}
|
||||
|
||||
.extra {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ async function handleSubmit() {
|
|||
<BasicForm @register="register" />
|
||||
</Col>
|
||||
<Col :span="10">
|
||||
<div class="change-avatar">
|
||||
<div>
|
||||
<div class="mb-2">
|
||||
头像
|
||||
</div>
|
||||
|
|
@ -63,6 +63,7 @@ async function handleSubmit() {
|
|||
btn-text="更换头像"
|
||||
:btn-props="{ preIcon: 'ant-design:cloud-upload-outlined' }"
|
||||
width="150"
|
||||
class="mb-4 block rounded-full"
|
||||
@change="updateAvatar"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -73,13 +74,3 @@ async function handleSubmit() {
|
|||
</Button>
|
||||
</CollapseContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.change-avatar {
|
||||
img {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const ListItemMeta = List.Item.Meta
|
|||
<ListItemMeta>
|
||||
<template #title>
|
||||
{{ item.title }}
|
||||
<Switch class="extra" checked-children="开" un-checked-children="关" default-checked />
|
||||
<Switch class="float-right mr-7.5 mt-0" checked-children="开" un-checked-children="关" default-checked />
|
||||
</template>
|
||||
<template #description>
|
||||
<div>{{ item.description }}</div>
|
||||
|
|
@ -26,11 +26,3 @@ const ListItemMeta = List.Item.Meta
|
|||
</List>
|
||||
</CollapseContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.extra {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ function handleSuccess() {
|
|||
<ListItemMeta>
|
||||
<template #title>
|
||||
{{ item.title }}
|
||||
<div v-if="item.extra" class="extra">
|
||||
<div v-if="item.extra" class="float-right mr-7.5 mt-2.5 cursor-pointer font-normal text-blue-500">
|
||||
<a-button type="link" @click="handleEdit(item.title)">
|
||||
{{ item.extra }}
|
||||
</a-button>
|
||||
|
|
@ -45,14 +45,3 @@ function handleSuccess() {
|
|||
</CollapseContainer>
|
||||
<PasswordModal @register="registerModal" @success="handleSuccess" />
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.extra {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin-right: 30px;
|
||||
font-weight: normal;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const tabBarStyle = { width: '220px' }
|
|||
|
||||
<template>
|
||||
<ScrollContainer>
|
||||
<div ref="wrapperRef" class="account-setting">
|
||||
<div ref="wrapperRef" class="m-3 rounded-1.5 bg-[var(--component-background)]">
|
||||
<Tabs tab-position="left" :tab-bar-style="tabBarStyle">
|
||||
<template v-for="item in settingList" :key="item.key">
|
||||
<TabPane :tab="item.name">
|
||||
|
|
@ -29,19 +29,3 @@ const tabBarStyle = { width: '220px' }
|
|||
</div>
|
||||
</ScrollContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.account-setting {
|
||||
margin: 12px;
|
||||
background-color: var(--component-background);
|
||||
border-radius: 6px;
|
||||
|
||||
.base-title {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
// .ant-tabs-tab-active {
|
||||
// background-color: @item-active-bg;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ async function submitForm(formData) {
|
|||
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<div class="step-form-form">
|
||||
<div class="mx-auto my-0 mt-2.5 w-200">
|
||||
<Steps :current="current">
|
||||
<Steps.Step title="选择流程" />
|
||||
<Steps.Step title="流程提交" />
|
||||
|
|
@ -113,11 +113,3 @@ async function submitForm(formData) {
|
|||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-form-form {
|
||||
width: 750px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<div class="step-form-form">
|
||||
<div class="mx-auto my-0 mt-2.5 w-200">
|
||||
<Steps :current="current">
|
||||
<Step title="生成信息" />
|
||||
<Step title="字段信息" />
|
||||
|
|
@ -94,11 +94,3 @@ onMounted(async () => {
|
|||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-form-form {
|
||||
width: 750px;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,46 +51,20 @@ watch(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="step1">
|
||||
<div class="step1-form">
|
||||
<div>
|
||||
<div class="mx-auto my-0 w-80%">
|
||||
<BasicForm @register="register" />
|
||||
</div>
|
||||
<Divider />
|
||||
<h3>说明</h3>
|
||||
<h4>基本信息</h4>
|
||||
<h3 class="mb-3 text-base">
|
||||
说明
|
||||
</h3>
|
||||
<h4 class="mb-1 text-sm">
|
||||
基本信息
|
||||
</h4>
|
||||
<p> 配置生成的基本信息 </p>
|
||||
|
||||
<h4>生成信息</h4>
|
||||
<p> 配置生成生成的详细信息。 </p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step1 {
|
||||
&-form {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pay-select {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.pay-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,11 +39,11 @@ function handleEdit(record: EditRecordRow) {
|
|||
|
||||
<template>
|
||||
<div class="step2">
|
||||
<div class="step2-table">
|
||||
<div class="mx-auto my-0 w-full">
|
||||
<BasicTable :data-source="columnsInfo" @register="registerTable" @row-click="handleEdit" />
|
||||
</div>
|
||||
<Divider />
|
||||
<div class="step2-button">
|
||||
<div class="flex justify-center">
|
||||
<a-button @click="customResetFunc">
|
||||
上一步
|
||||
</a-button>
|
||||
|
|
@ -51,35 +51,12 @@ function handleEdit(record: EditRecordRow) {
|
|||
提交
|
||||
</a-button>
|
||||
</div>
|
||||
<h3>说明</h3>
|
||||
<h4>配置字段</h4>
|
||||
<h3 class="mb-3 text-base">
|
||||
说明
|
||||
</h3>
|
||||
<h4 class="mb-1 text-sm">
|
||||
配置字段
|
||||
</h4>
|
||||
<p> 配置表的字段类型，增删改查，字典等 </p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step2 {
|
||||
&-table {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ function handleGoList() {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="result-success m-5">
|
||||
<div class="m-5 bg-white px-8 py-12 dark:bg-dark">
|
||||
<Result status="success" title="代码生成成功" sub-title="可点击下方按钮预览、下载，或返回列表页。">
|
||||
<template #extra>
|
||||
<a-button key="console" type="primary" @click="handleGoList">
|
||||
|
|
@ -53,15 +53,3 @@ function handleGoList() {
|
|||
<PreviewModal @register="registerPreviewModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.result-success {
|
||||
padding: 48px 32px;
|
||||
background-color: var(--component-background);
|
||||
|
||||
&__content {
|
||||
padding: 24px 40px;
|
||||
background-color: @background-color-light;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue