b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
南宁网宿科技
2024-04-24 16:36:46 +08:00
commit 121348e011
991 changed files with 158700 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/components/DesignTools/index.bak.vue Normal file
View File

@@ -0,0 +1,256 @@
<template>
<!-- 显示工具栏 -->
<template v-if="visible">
<template v-if="data">
<!-- 首页才显示 -->
<a-card
v-if="data.home == 1"
title="页面设置"
size="small"
:bordered="false"
style="width: 300px"
>
<template #extra>
<a-button v-if="visible" type="text">
<template #icon>
<MinusOutlined @click="openEdit" />
</template>
</a-button>
</template>
<a-form
v-if="visible"
ref="formRef"
layout="vertical"
:model="form"
:rules="rules"
>
{{ layout }}
<a-form-item label="画板">
<a-descriptions :column="2">
<a-descriptions-item
label="内容区域"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<a-input
placeholder="1200"
v-model:value="data.layout"
style="width: 90px"
/>
</a-descriptions-item>
</a-descriptions>
</a-form-item>
<a-form-item label="颜色">
<a-descriptions :column="2">
<a-descriptions-item
label="背景颜色"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<ele-color-picker
v-model:value="layout.backgroundColor"
@change="updateColor"
/>
</a-descriptions-item>
<a-descriptions-item
label="文字颜色"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<ele-color-picker
v-model:value="layout.color"
@change="updateColor"
/>
</a-descriptions-item>
<a-descriptions-item
label="高亮颜色"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<ele-color-picker
v-model:value="layout.color"
@change="updateColor"
/>
</a-descriptions-item>
</a-descriptions>
</a-form-item>
</a-form>
</a-card>
<a-card
v-if="data.home == 0"
title="数据面板"
size="small"
:bordered="false"
style="width: 300px"
>
<template #extra>
<a-button v-if="visible" type="text">
<template #icon>
<MinusOutlined @click="openEdit" />
</template>
</a-button>
</template>
<a-form
v-if="visible"
ref="formRef"
layout="vertical"
:model="form"
:rules="rules"
>
<template v-if="item">
<a-form-item label="画板">
<a-descriptions :column="2">
<a-descriptions-item
label="X"
:labelStyle="{ width: '25px', alignItems: 'center' }"
>
<a-input-number
placeholder="X"
style="width: 90px"
v-model:value="item.style.marginLeft"
/>
</a-descriptions-item>
<a-descriptions-item
label="X"
:labelStyle="{ width: '25px', alignItems: 'center' }"
>
<a-input-number
placeholder="X"
style="width: 90px"
v-model:value="item.style.marginTop"
/>
</a-descriptions-item>
<a-descriptions-item
label="W"
:labelStyle="{ width: '25px', alignItems: 'center' }"
>
<a-input
placeholder="W"
v-model:value="item.style.width"
style="width: 90px"
/>
</a-descriptions-item>
<a-descriptions-item
label="H"
:labelStyle="{ width: '25px', alignItems: 'center' }"
>
<a-input-number
placeholder=""
style="width: 90px"
v-model:value="item.style.height"
/>
</a-descriptions-item>
<a-descriptions-item
label="R"
:labelStyle="{ width: '25px', alignItems: 'center' }"
>
<a-input-number
placeholder="圆角半径"
style="width: 90px"
v-model:value="item.style.borderRadius"
/>
</a-descriptions-item>
</a-descriptions>
</a-form-item>
<a-form-item label="背景颜色">
<ele-color-picker
v-model:value="item.style.backgroundColor"
@change="updateColor"
/>
</a-form-item>
</template>
</a-form>
</a-card>
</template>
</template>
<!-- 隐藏工具栏 -->
<a-button v-if="!visible" type="text" @click="openEdit">
<template #icon>
<SettingOutlined />
</template>
</a-button>
</template>
<script setup lang="ts">
import useFormData from '@/utils/use-form-data';
import { reactive, ref, watch } from 'vue';
import { MinusOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { Design } from '@/api/cms/design/model';
import { Layout } from '@/api/layout/model';
const props = defineProps<{
// 是否显示
visible: boolean;
// 修改回显的数据
data?: Design | null;
layout?: Layout;
index?: number | 0;
}>();
const item = ref<any>({
title: '页面设置',
name: 'common',
style: {
width: '100vw',
height: '100vh',
borderRadius: '4'
},
data: []
});
const emit = defineEmits<{
(e: 'done', index: number): void;
(e: 'update'): void;
}>();
// 表单数据
const { form, assignFields } = useFormData<Design>({
pageId: undefined,
home: undefined,
layout: undefined
});
// 表单验证规则
const rules = reactive({
name: [
{
required: true,
type: 'string',
message: '请填写页面名称',
trigger: 'blur'
}
],
path: [
{
required: true,
type: 'string',
message: '请填写路由地址',
trigger: 'blur'
}
],
component: [
{
required: true,
type: 'string',
message: '请填写组件路径',
trigger: 'blur'
}
]
});
const openEdit = () => {
emit('update');
};
const updateColor = (color: string) => {
item.value.style.background = color;
emit('done', item);
};
const onClick = () => {
emit('done', Number(props.index));
};
watch(
() => props.data,
(data) => {
console.log(data);
}
);
</script>
<style scoped lang="less"></style>

171
src/components/DesignTools/index.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<!-- 显示工具栏 -->
<template v-if="visible">
<template v-if="data">
<!-- 首页才显示 -->
<a-card
v-if="data.home == 1"
title="页面设置"
size="small"
:bordered="false"
style="width: 300px"
>
<template #extra>
<a-button v-if="visible" type="text">
<template #icon>
<MinusOutlined @click="openEdit" />
</template>
</a-button>
</template>
<a-form
v-if="visible"
ref="formRef"
layout="vertical"
:model="form"
:rules="rules"
>
{{ layout }}
<a-form-item label="画板">
<a-descriptions :column="2">
<a-descriptions-item
label="内容区域"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<a-input
placeholder="1200"
v-model:value="layout.width"
style="width: 90px"
/>
</a-descriptions-item>
</a-descriptions>
</a-form-item>
<a-form-item label="颜色">
<a-descriptions :column="2">
<a-descriptions-item
label="背景颜色"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<ele-color-picker
v-model:value="data.layout.backgroundColor"
@change="updateColor"
/>
</a-descriptions-item>
<a-descriptions-item
label="文字颜色"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<ele-color-picker
v-model:value="layout.color"
@change="updateColor"
/>
</a-descriptions-item>
<a-descriptions-item
label="高亮颜色"
:labelStyle="{ width: '70px', alignItems: 'center' }"
>
<ele-color-picker
v-model:value="layout.hover"
@change="updateColor"
/>
</a-descriptions-item>
</a-descriptions>
</a-form-item>
</a-form>
</a-card>
</template>
</template>
<!-- 隐藏工具栏 -->
<a-button v-if="!visible" type="text" @click="openEdit">
<template #icon>
<SettingOutlined />
</template>
</a-button>
</template>
<script setup lang="ts">
import useFormData from '@/utils/use-form-data';
import { reactive, ref, watch } from 'vue';
import { MinusOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { Design } from '@/api/cms/design/model';
import { Layout } from '@/api/layout/model';
const layout = ref<Layout>({});
const props = defineProps<{
// 是否显示
visible: boolean;
// 修改回显的数据
data?: Design | null;
}>();
const item = ref<any>({
title: '页面设置',
name: 'common',
style: {
width: '100vw',
height: '100vh',
borderRadius: '4'
},
data: []
});
const emit = defineEmits<{
(e: 'done', index: number): void;
(e: 'update'): void;
}>();
// 表单数据
const { form, assignFields } = useFormData<Design>({
pageId: undefined,
home: undefined,
layout: undefined
});
// 表单验证规则
const rules = reactive({
name: [
{
required: true,
type: 'string',
message: '请填写页面名称',
trigger: 'blur'
}
],
path: [
{
required: true,
type: 'string',
message: '请填写路由地址',
trigger: 'blur'
}
],
component: [
{
required: true,
type: 'string',
message: '请填写组件路径',
trigger: 'blur'
}
]
});
const openEdit = () => {
emit('update');
};
const updateColor = (color: string) => {
item.value.style.background = color;
emit('done', item);
};
const onClick = () => {
emit('done', Number(props.index));
};
watch(
() => props.data,
(data) => {
console.log(data);
}
);
</script>
<style scoped lang="less"></style>