mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 04:57:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

♻️ Refactoring code. 调整前端组件增加相关api 方便二次开发

Browse Source
This commit is contained in:
lbw 2023-11-20 14:42:46 +08:00
parent 487ddeadb0
commit 3ece22d8ab
23 changed files with 564 additions and 912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ChinaArea/index.vue
View File

@ -1,10 +1,10 @@
<template>
<el-cascader :options="optionsData" v-model="selectedOptions" @change="handleChange" />
<el-cascader :options="optionsData" :disabled="disabled" v-model="selectedOptions" @change="handleChange" />
</template>
<script setup lang="ts" name="china-area">
import { provinceAndCityData, provinceAndCityDataPlus, regionData, regionDataPlus } from '/@/utils/chinaArea';
const emit = defineEmits(['update:value', 'change']);
const emit = defineEmits(['update:modelValue', 'change']);
const optionsData = ref();
const props = defineProps({
// 当前的值
@ -18,6 +18,11 @@ const props = defineProps({
type: Boolean,
default: false,
},
// 是否禁用
disabled: {
type: Boolean,
default: () => false,
},
});
const selectedOptions = computed({
@ -25,7 +30,7 @@ const selectedOptions = computed({
return props.modelValue?.split(',');
},
set: (val) => {
emit('update:value', val?.join(','));
emit('update:modelValue', val?.join(','));
},
});

170
src/components/CodeEditor/index.vue
View File

@ -3,18 +3,18 @@
* @version: 1.0
* @Author: sakuya
* @Date: 2022年5月20日21:46:29
* @LastEditors:
* @LastEditTime:
* @LastEditors:
* @LastEditTime:
-->
<template>
<div class="code-editor" :style="{ height: _height}">
<textarea ref="textarea" v-model="contentValue"></textarea>
</div>
<div class="code-editor" :style="{ height: _height }">
<textarea ref="textarea" v-model="contentValue"></textarea>
</div>
</template>
<script>
import {markRaw} from 'vue';
import { markRaw } from 'vue';
//框架
import CodeMirror from 'codemirror';
@ -32,92 +32,90 @@ import 'codemirror/mode/velocity/velocity';
import 'codemirror/mode/go/go';
export default {
props: {
modelValue: {
type: String,
default: '',
},
mode: {
type: String,
default: 'go',
},
height: {
type: [String, Number],
default: 300,
},
options: {
type: Object,
default: () => {
},
},
theme: {
type: String,
default: 'idea',
},
readOnly: {
type: Boolean,
default: false,
},
},
data() {
return {
contentValue: this.modelValue,
coder: null,
opt: {
theme: this.theme, //主题
styleActiveLine: true, //高亮当前行
lineNumbers: true, //行号
lineWrapping: false, //自动换行
tabSize: 4, //Tab缩进
indentUnit: 4, //缩进单位
indentWithTabs: true, //自动缩进
mode: this.mode, //语言
readOnly: this.readOnly, //只读
...this.options,
},
};
},
computed: {
_height() {
return Number(this.height) ? Number(this.height) + 'px' : this.height;
},
},
watch: {
modelValue(val) {
this.contentValue = val;
if (val !== this.coder.getValue()) {
this.coder.setValue(val);
}
},
},
mounted() {
this.init();
//获取挂载的所有modes
//console.log(CodeMirror.modes)
},
methods: {
init() {
this.coder = markRaw(CodeMirror.fromTextArea(this.$refs.textarea, this.opt));
this.coder.on('change', (coder) => {
this.contentValue = coder.getValue();
this.$emit('update:modelValue', this.contentValue);
});
},
formatStrInJson(strValue) {
return JSON.stringify(JSON.parse(strValue), null, 4);
},
},
props: {
modelValue: {
type: String,
default: '',
},
mode: {
type: String,
default: 'go',
},
height: {
type: [String, Number],
default: 300,
},
options: {
type: Object,
default: () => {},
},
theme: {
type: String,
default: 'idea',
},
readOnly: {
type: Boolean,
default: false,
},
},
data() {
return {
contentValue: this.modelValue,
coder: null,
opt: {
theme: this.theme, //主题
styleActiveLine: true, //高亮当前行
lineNumbers: true, //行号
lineWrapping: false, //自动换行
tabSize: 4, //Tab缩进
indentUnit: 4, //缩进单位
indentWithTabs: true, //自动缩进
mode: this.mode, //语言
readOnly: this.readOnly, //只读
...this.options,
},
};
},
computed: {
_height() {
return Number(this.height) ? Number(this.height) + 'px' : this.height;
},
},
watch: {
modelValue(val) {
this.contentValue = val;
if (val !== this.coder.getValue()) {
this.coder.setValue(val);
}
},
},
mounted() {
this.init();
//获取挂载的所有modes
//console.log(CodeMirror.modes)
},
methods: {
init() {
this.coder = markRaw(CodeMirror.fromTextArea(this.$refs.textarea, this.opt));
this.coder.on('change', (coder) => {
this.contentValue = coder.getValue();
this.$emit('update:modelValue', this.contentValue);
});
},
formatStrInJson(strValue) {
return JSON.stringify(JSON.parse(strValue), null, 4);
},
},
};
</script>
<style scoped>
.code-editor {
font-size: 14px;
border: 1px solid #ddd;
line-height: 150%;
font-size: 14px;
border: 1px solid #ddd;
line-height: 150%;
}
.code-editor:deep(.CodeMirror) {
height: 100%;
height: 100%;
}
</style>

66
src/components/Crontab/index.vue
View File

@ -43,10 +43,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.second.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.second.type == 1">
@ -77,10 +77,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.minute.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.minute.type == 1">
@ -111,10 +111,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.hour.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.hour.type == 1">
@ -145,12 +145,12 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.day.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio border label="4">本月最后一天</el-radio>
<el-radio border label="5">不指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
<el-radio-button label="4">本月最后一天</el-radio-button>
<el-radio-button label="5">不指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.day.type == 1">
@ -181,10 +181,10 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.month.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.month.type == 1">
@ -216,12 +216,12 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.week.type">
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio border label="4">本月最后一周</el-radio>
<el-radio border label="5">不指定</el-radio>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
<el-radio-button label="4">本月最后一周</el-radio-button>
<el-radio-button label="5">不指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.week.type == 1">
@ -265,11 +265,11 @@
<el-form>
<el-form-item label="类型">
<el-radio-group v-model="value.year.type">
<el-radio border label="-1">忽略</el-radio>
<el-radio border label="0">任意值</el-radio>
<el-radio border label="1">范围</el-radio>
<el-radio border label="2">间隔</el-radio>
<el-radio border label="3">指定</el-radio>
<el-radio-button label="-1">忽略</el-radio-button>
<el-radio-button label="0">任意值</el-radio-button>
<el-radio-button label="1">范围</el-radio-button>
<el-radio-button label="2">间隔</el-radio-button>
<el-radio-button label="3">指定</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="范围" v-if="value.year.type == 1">

8
src/components/DictTag/index.vue
View File

@ -1,8 +1,10 @@
<template>
<div>
<template v-for="(item, index) in props.options">
<template v-if="values.includes(item.value)">
<span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="index" :index="index" :class="item.elTagClass">{{ item.label }}</span>
<template v-if="values.includes(item.value || item)">
<span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="index" :index="index" :class="item.elTagClass">{{
item.label || item
}}</span>
<el-tag
v-else
:disable-transitions="true"
@ -10,7 +12,7 @@
:index="index"
:type="item.elTagType === 'primary' ? '' : item.elTagType"
:class="item.elTagClass"
>{{ item.label }}</el-tag
>{{ item.label || item }}</el-tag
>
</template>
</template>

36
src/components/Link/custom-link.vue
View File

@ -1,36 +0,0 @@
<template>
<div class="custom-link mt-[30px]">
<div class="flex flex-wrap items-center">
自定义链接
<div class="ml-4 flex-1 min-w-[100px]">
<el-input :model-value="modelValue.query?.url" placeholder="请输入链接地址" @input="handleInput" />
</div>
</div>
<div class="form-tips">请填写完整的带有“https://”或“http://”的链接地址，链接的域名必须在微信公众平台设置业务域名</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import { LinkTypeEnum, type Link } from '.';
defineProps({
modelValue: {
type: Object as PropType<Link>,
default: () => ({}),
},
});
const emit = defineEmits<{
(event: 'update:modelValue', value: Link): void;
}>();
const handleInput = (value: string) => {
emit('update:modelValue', {
path: '/pages/webview/webview',
query: {
url: value,
},
type: LinkTypeEnum.CUSTOM_LINK,
});
};
</script>

11
src/components/Link/index.ts
View File

@ -1,11 +0,0 @@
export enum LinkTypeEnum {
'SHOP_PAGES' = 'shop',
'CUSTOM_LINK' = 'custom',
}
export interface Link {
path: string;
name?: string;
type: string;
query?: Record<string, any>;
}

92
src/components/Link/index.vue
View File

@ -1,92 +0,0 @@
<template>
<div class="flex link">
<el-menu :default-active="activeMenu" class="!w-[160px] min-h-[350px] link-menu" @select="handleSelect">
<el-menu-item v-for="(item, index) in menus" :index="item.type" :key="index">
<span>{{ item.name }}</span>
</el-menu-item>
</el-menu>
<div class="flex-1 pl-4">
<shop-pages v-model="activeLink" v-if="LinkTypeEnum.SHOP_PAGES == activeMenu" />
<custom-link v-model="activeLink" v-if="LinkTypeEnum.CUSTOM_LINK == activeMenu" />
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import { LinkTypeEnum, type Link } from '.';
import ShopPages from './shop-pages.vue';
import CustomLink from './custom-link.vue';
const props = defineProps({
modelValue: {
type: Object as PropType<Link>,
required: true,
},
});
const emit = defineEmits<{
(event: 'update:modelValue', value: any): void;
}>();
const menus = ref([
{
name: '商城页面',
type: LinkTypeEnum.SHOP_PAGES,
link: {},
},
{
name: '自定义链接',
type: LinkTypeEnum.CUSTOM_LINK,
link: {},
},
]);
const activeLink = computed({
get() {
return menus.value.find((item) => item.type == activeMenu.value)?.link as Link;
},
set(value) {
menus.value.forEach((item) => {
if (item.type == activeMenu.value) {
item.link = value;
}
});
},
});
const activeMenu = ref<string>(LinkTypeEnum.SHOP_PAGES);
const handleSelect = (index: string) => {
activeMenu.value = index;
};
watch(activeLink, (value) => {
if (!value?.type) return;
emit('update:modelValue', value);
});
watch(
() => props.modelValue,
(value) => {
activeMenu.value = value.type;
activeLink.value = value;
},
{
immediate: true,
}
);
</script>
<style lang="scss" scoped>
.link-menu {
--el-menu-item-height: 40px;
:deep(.el-menu-item) {
border-color: transparent !important;
&.is-active {
border-right-width: 2px !important;
border-color: var(--el-color-primary) !important;
background-color: var(--el-color-primary-light-9) !important;
}
}
}
</style>

75
src/components/Link/picker.vue
View File

@ -1,75 +0,0 @@
<template>
<div class="flex-1 link-picker" @click="!disabled && popupRef?.open()">
<el-input :model-value="getLink" placeholder="请选择链接123" readonly :disabled="disabled"> </el-input>
<popup ref="popupRef" width="700px" title="链接选择" @confirm="handleConfirm">
<link-content v-model="activeLink" />
</popup>
</div>
</template>
<script lang="ts" setup>
import { LinkTypeEnum, type Link } from '.';
import LinkContent from './index.vue';
import Popup from '/@/components/Popup/index.vue';
const props = defineProps({
modelValue: {
type: Object,
},
disabled: {
type: Boolean,
default: false,
},
});
const emit = defineEmits<{
(event: 'update:modelValue', value: any): void;
}>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const activeLink = ref<Link>({ path: '', type: LinkTypeEnum.SHOP_PAGES });
const handleConfirm = () => {
emit('update:modelValue', activeLink.value);
};
const getLink = computed(() => {
switch (props.modelValue?.type) {
case LinkTypeEnum.SHOP_PAGES:
return props.modelValue.name;
case LinkTypeEnum.CUSTOM_LINK:
return props.modelValue.query?.url;
default:
return props.modelValue?.name;
}
});
watch(
() => props.modelValue,
(value) => {
if (value?.type) {
activeLink.value = value as Link;
}
},
{
immediate: true,
}
);
</script>
<style scoped lang="scss">
.link-picker {
:deep(.el-input) {
&.is-disabled {
.el-input__inner {
cursor: not-allowed;
}
.el-input__suffix {
cursor: not-allowed;
}
}
.el-input__inner {
cursor: pointer;
}
.el-input__suffix {
cursor: pointer;
}
}
}
</style>

100
src/components/Link/shop-pages.vue
View File

@ -1,100 +0,0 @@
<template>
<div class="shop-pages">
<div class="flex flex-wrap link-list">
<div
class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer mr-[10px] mb-[10px]"
v-for="(item, index) in linkList"
:class="{
'border-primary text-primary': modelValue.path == item.path && modelValue.name == item.name,
}"
:key="index"
@click="handleSelect(item)"
>
{{ item.name }}
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import { LinkTypeEnum, type Link } from '.';
defineProps({
modelValue: {
type: Object as PropType<Link>,
default: () => ({}),
},
});
const emit = defineEmits<{
(event: 'update:modelValue', value: Link): void;
}>();
const linkList = ref([
{
path: '/pages/index/index',
name: '首页',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/news/news',
name: '文章资讯',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/user/user',
name: '个人中心',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/collection/collection',
name: '我的收藏',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/customer_service/customer_service',
name: '联系客服',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/user_set/user_set',
name: '个人设置',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/as_us/as_us',
name: '关于我们',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/user_data/user_data',
name: '个人资料',
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/agreement/agreement',
name: '隐私政策',
query: {
type: 'privacy',
},
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/agreement/agreement',
name: '服务协议',
query: {
type: 'service',
},
type: LinkTypeEnum.SHOP_PAGES,
},
{
path: '/pages/search/search',
name: '搜索',
type: LinkTypeEnum.SHOP_PAGES,
}
]);
const handleSelect = (value: Link) => {
emit('update:modelValue', value);
};
</script>

23
src/components/PopoverInput/index.vue
View File

@ -18,7 +18,7 @@
<el-input
v-else
v-model.trim="inputValue"
:maxlength="limit"
:maxlength="maxlength"
:show-word-limit="showLimit"
:type="type"
:size="size"
@ -27,8 +27,8 @@
/>
</div>
<div class="flex-none popover-input__btns">
<el-button link @click="close">取消</el-button>
<el-button type="primary" :size="size" @click="handleConfirm">确定</el-button>
<el-button link @click="close">{{ $t('common.cancelButtonText') }}</el-button>
<el-button type="primary" :size="size" @click="handleConfirm">{{ $t('common.confirmButtonText') }}</el-button>
</div>
</div>
<template #reference>
@ -45,7 +45,7 @@ import { useEventListener } from '@vueuse/core';
import type { PropType } from 'vue';
const props = defineProps({
value: {
modelValue: {
type: String,
},
type: {
@ -73,6 +73,10 @@ const props = defineProps({
type: Number,
default: 200,
},
maxlength: {
type: Number,
default: 20,
},
showLimit: {
type: Boolean,
default: false,
@ -82,28 +86,33 @@ const props = defineProps({
default: true,
},
});
const emit = defineEmits(['confirm']);
const emit = defineEmits(['confirm', 'update:modelValue']);
const visible = ref(false);
const inPopover = ref(false);
const inputValue = ref();
const handleConfirm = () => {
close();
emit('confirm', inputValue.value);
emit('update:modelValue', inputValue.value);
};
const handleOpen = () => {
if (props.disabled) {
return;
}
visible.value = true;
inputValue.value = '';
};
const close = () => {
visible.value = false;
};
watch(
() => props.value,
() => inputValue.value,
(value) => {
inputValue.value = value;
emit('update:modelValue', value);
},
{
immediate: true,

18
src/components/Popup/index.vue
View File

@ -21,11 +21,11 @@
<!-- 底部弹窗页脚 -->
<template #footer>
<div class="dialog-footer">
<el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
{{ cancelButtonText }}
<el-button @click="handleEvent('cancel')">
{{ $t('common.cancelButtonText') }}
</el-button>
<el-button v-if="confirmButtonText" type="primary" @click="handleEvent('confirm')">
{{ confirmButtonText }}
<el-button type="primary" @click="handleEvent('confirm')">
{{ $t('common.confirmButtonText') }}
</el-button>
</div>
</template>
@ -46,16 +46,6 @@ export default defineComponent({
type: String,
default: '',
},
confirmButtonText: {
// 确认按钮内容
type: [String, Boolean],
default: '确定',
},
cancelButtonText: {
// 取消按钮内容
type: [String, Boolean],
default: '取消',
},
width: {
// 弹窗的宽度
type: String,

13
src/components/QueryTree/i18n/en.ts
View File

@ -1,8 +1,9 @@
export default {
queryTree: {
hideSearch: 'hideSearch',
displayTheSearch: 'displayTheSearch',
refresh: 'refresh',
print: 'print',
},
queryTree: {
hideSearch: 'hideSearch',
displayTheSearch: 'displayTheSearch',
refresh: 'refresh',
print: 'print',
view: 'view'
},
};

1
src/components/QueryTree/i18n/zh-cn.ts
View File

@ -4,5 +4,6 @@ export default {
displayTheSearch: '显示搜索',
refresh: '刷新',
print: '打印',
view: '视图'
},
};

5
src/components/RightToolbar/index.vue
View File

@ -21,7 +21,10 @@
<el-tooltip class="item" effect="dark" :content="$t('queryTree.refresh')" placement="top">
<el-button circle icon="Refresh" @click="handleRefresh()" />
</el-tooltip>
</el-row>
<!-- 插槽 -->
<slot></slot>
</el-row>
</div>
</template>

9
src/components/Upload/Image.vue
View File

@ -20,15 +20,15 @@
<div class="upload-handle" @click.stop>
<div class="handle-icon" @click="editImg" v-if="!self_disabled">
<el-icon :size="props.iconSize"><Edit /></el-icon>
<span v-if="!props.iconSize">编辑</span>
<span v-if="!props.iconSize">{{ $t('common.editBtn') }}</span>
</div>
<div class="handle-icon" @click="imgViewVisible = true">
<el-icon :size="props.iconSize"><ZoomIn /></el-icon>
<span v-if="!props.iconSize">查看</span>
<span v-if="!props.iconSize">{{ $t('common.viewBtn') }}</span>
</div>
<div class="handle-icon" @click="deleteImg" v-if="!self_disabled">
<el-icon :size="props.iconSize"><Delete /></el-icon>
<span v-if="!props.iconSize">删除</span>
<span v-if="!props.iconSize">{{ $t('common.delBtn') }}</span>
</div>
</div>
</template>
@ -71,6 +71,7 @@ interface UploadFileProps {
width?: string; // 组件宽度 ==> 非必传（默认为 150px）
borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
iconSize?: number;
dir?: string; // 文件目录
}
// 接受父组件参数
@ -84,6 +85,7 @@ const props = withDefaults(defineProps<UploadFileProps>(), {
height: '150px',
width: '150px',
borderRadius: '8px',
dir: ''
});
// 生成组件唯一id
@ -111,6 +113,7 @@ const emit = defineEmits<UploadEmits>();
const handleHttpUpload = async (options: UploadRequestOptions) => {
let formData = new FormData();
formData.append('file', options.file);
formData.append('dir', props.dir);
try {
const { data } = await request({
url: props.uploadFileUrl,

2
src/components/Upload/i18n/en.ts
View File

@ -11,5 +11,7 @@ export default {
size: 'size not exceeding',
format: 'format',
file: 'file',
sizeErrorText: 'file size error, max ',
typeErrorText: 'file type error, upload ',
},
};

2
src/components/Upload/i18n/zh-cn.ts
View File

@ -11,5 +11,7 @@ export default {
size: '大小不超过',
format: '格式为',
file: '的文件',
sizeErrorText: '文件大小不超过',
typeErrorText: '文件类型错误，请上传 ',
},
};

33
src/components/Upload/index.vue
View File

@ -11,7 +11,8 @@
:limit="limit"
:on-error="handleUploadError"
:on-remove="handleRemove"
:data="data"
:on-preview="handlePreview"
:data="formData"
:auto-upload="autoUpload"
:on-success="handleUploadSuccess"
class="upload-file-uploader"
@ -47,7 +48,7 @@
:auto-upload="autoUpload"
:on-error="handleUploadError"
:on-remove="handleRemove"
:data="data"
:data="formData"
:on-success="handleUploadSuccess"
class="upload-file-uploader"
multiple
@ -58,9 +59,11 @@
</template>
<script setup lang="ts" name="upload-file">
import { useMessage } from '/@/hooks/message';
import { Session } from '/@/utils/storage';
import {useMessage} from '/@/hooks/message';
import {Session} from '/@/utils/storage';
import other from '/@/utils/other';
import {useI18n} from 'vue-i18n';
const props = defineProps({
modelValue: [String, Array],
// 数量限制
@ -95,7 +98,12 @@ const props = defineProps({
},
data: {
type: Object,
default:{}
},
dir: {
type: String,
default: ''
},
autoUpload: {
type: Boolean,
default: true,
@ -108,7 +116,9 @@ const number = ref(0);
const fileList = ref([]) as any;
const uploadList = ref([]) as any;
const fileUpload = ref();
const { t } = useI18n();
// 请求头处理
const headers = computed(() => {
return {
Authorization: 'Bearer ' + Session.get('token'),
@ -116,6 +126,11 @@ const headers = computed(() => {
};
});
// 请求参数处理
const formData = computed(() => {
return Object.assign(props.data,{dir: props.dir});
});
// 上传前校检格式和大小
const handleBeforeUpload = (file: File) => {
// 校检文件类型
@ -124,7 +139,7 @@ const handleBeforeUpload = (file: File) => {
const fileExt = fileName[fileName.length - 1];
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
useMessage().error(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
useMessage().error(`${t('excel.typeErrorText')} ${props.fileType.join('/')}!`);
return false;
}
}
@ -132,7 +147,7 @@ const handleBeforeUpload = (file: File) => {
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
useMessage().error(`上传文件大小不能超过 ${props.fileSize} MB!`);
useMessage().error(`${t('excel.sizeErrorText')} ${props.fileSize} MB!`);
return false;
}
}
@ -143,7 +158,7 @@ const handleBeforeUpload = (file: File) => {
// 上传成功回调
function handleUploadSuccess(res: any, file: any) {
if (res.code === 0) {
uploadList.value.push({ name: res.data.fileName, url: res.data.url });
uploadList.value.push({ name: file.name, url: res.data.url });
uploadedSuccessfully();
} else {
number.value--;
@ -170,6 +185,10 @@ const handleRemove = (file: any) => {
emit('update:modelValue', listToString(fileList.value));
};
const handlePreview = (file: any) => {
other.downBlobFile(file.url, {}, file.name);
};
/**
* 将对象数组转为字符串，以逗号分隔。
* @param list 待转换的对象数组。

3
src/components/Websocket/index.vue
View File

@ -4,6 +4,7 @@
<script setup lang="ts" name="global-websocket">
import { ElNotification } from 'element-plus';
import { Session } from '/@/utils/storage';
import other from "/@/utils/other";
const emit = defineEmits(['rollback']);
@ -49,7 +50,7 @@ const initWebSocket = () => {
let host = window.location.host;
// baseURL
let baseURL = import.meta.env.VITE_API_URL;
let wsUri = `ws://${host}${baseURL}${props.uri}?access_token=${token.value}&TENANT-ID=${tenant.value}`;
let wsUri = `ws://${host}${baseURL}${other.adaptationUrl(props.uri)}?access_token=${token.value}&TENANT-ID=${tenant.value}`;
// 建立连接
state.webSocket = new WebSocket(wsUri);
// 连接成功

2
src/views/admin/file/form.vue
View File

@ -1,5 +1,5 @@
<template>
<el-dialog title="上传文件" v-model="visible" :close-on-click-modal="false" draggable>
<el-dialog :title="$t('file.uploadFile')" v-model="visible" :close-on-click-modal="false" draggable>
<upload @change="success" :model-value="fileList" />
<template #footer>
<span class="dialog-footer">

1
src/views/admin/file/i18n/en.ts
View File

@ -4,6 +4,7 @@ export default {
importsysFileTip: 'import SysFile',
id: 'id',
fileName: 'fileName',
uploadFile: 'upload file',
bucketName: 'bucketName',
original: 'original',
type: 'type',

1
src/views/admin/file/i18n/zh-cn.ts
View File

@ -3,6 +3,7 @@ export default {
index: '#',
importsysFileTip: '导入文件管理表',
id: '编号',
uploadFile: '上传文件',
fileName: '文件名称',
bucketName: '桶名称',
original: '原文件名',

794
src/views/admin/user/personal.vue
View File

@ -1,118 +1,105 @@
<template>
<el-drawer v-model="visible" :title="$t('personal.name')" size="40%">
<el-tabs style="height: 200px" class="demo-tabs">
<el-tab-pane label="基本信息" v-loading="loading">
<el-form :model="formData" :rules="ruleForm" label-width="100px" class="mt30" ref="formdataRef">
<el-row :gutter="20">
<el-col :span="24" class="mb20">
<el-form-item prop="avatar">
<ImageUpload v-model:imageUrl="formData.avatar" borderRadius="50%">
<template #empty>
<el-icon><Avatar /></el-icon>
<span>请上传头像</span>
</template>
</ImageUpload>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" clearable disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="手机" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入手机" clearable></el-input>
</el-form-item>
</el-col>
<el-drawer v-model="visible" :title="$t('personal.name')" size="40%">
<el-tabs style="height: 200px" class="demo-tabs">
<el-tab-pane label="基本信息" v-loading="loading">
<el-form :model="formData" :rules="ruleForm" label-width="100px" class="mt30" ref="formdataRef">
<el-row :gutter="20">
<el-col :span="24" class="mb20">
<el-form-item prop="avatar">
<ImageUpload v-model:imageUrl="formData.avatar" borderRadius="50%">
<template #empty>
<el-icon>
<Avatar/>
</el-icon>
<span>请上传头像</span>
</template>
</ImageUpload>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" clearable disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="手机" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入手机" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="昵称" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入昵称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item>
<el-button type="primary" @click="handleSaveUser"> 更新个人信息 </el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="安全信息">
<el-form :model="passwordFormData" :rules="passwordRuleForm" label-width="100px" class="mt30" ref="passwordFormdataRef">
<el-row :gutter="20">
<el-col :span="24" class="mb20">
<el-form-item label="原密码" prop="password">
<el-input v-model="passwordFormData.password" placeholder="请输入密码" clearable type="password"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="新密码" prop="newpassword1">
<strength-meter
v-model="passwordFormData.newpassword1"
:minlength="6"
:maxlength="16"
placeholder="请输入新密码"
@score="passwordScore"
></strength-meter>
<!-- <el-input v-model="passwordFormData.newpassword1" clearable type="password"></el-input>-->
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="确认密码" prop="newpassword2">
<strength-meter v-model="passwordFormData.newpassword2" :minlength="6" :maxlength="16" placeholder="请重复密码"></strength-meter>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item>
<el-button type="primary" @click="handleChangePassword"> 修改密码 </el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="第三方账号">
<el-table :data="socialList" class="mt10">
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="name" label="平台"></el-table-column>
<el-table-column label="状态">
<template #default="scope">
<el-tag v-if="scope.row.openId"> 已绑定 </el-tag>
<el-tag v-else> 未绑定 </el-tag>
</template>
</el-table-column>
<el-table-column prop="action" label="操作">
<template #default="scope">
<el-button @click="Unbinding(scope.row.type)" text type="primary" v-if="scope.row.openId"> 解绑 </el-button>
<el-button @click="handleClick(scope.row.type)" text type="primary" v-else> 绑定 </el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-drawer>
<el-col :span="24" class="mb20">
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="昵称" prop="nickname">
<el-input v-model="formData.nickname" placeholder="请输入昵称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item>
<el-button type="primary" @click="handleSaveUser"> 更新个人信息</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="安全信息">
<el-form :model="passwordFormData" :rules="passwordRuleForm" label-width="100px" class="mt30"
ref="passwordFormdataRef">
<el-row :gutter="20">
<el-col :span="24" class="mb20">
<el-form-item label="原密码" prop="password">
<el-input v-model="passwordFormData.password" placeholder="请输入密码" clearable
type="password"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="新密码" prop="newpassword1">
<strength-meter
v-model="passwordFormData.newpassword1"
:minlength="6"
:maxlength="16"
placeholder="请输入新密码"
@score="passwordScore"
></strength-meter>
<!-- <el-input v-model="passwordFormData.newpassword1" clearable type="password"></el-input>-->
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="确认密码" prop="newpassword2">
<strength-meter v-model="passwordFormData.newpassword2" :minlength="6" :maxlength="16"
placeholder="请重复密码"></strength-meter>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item>
<el-button type="primary" @click="handleChangePassword"> 修改密码</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
</el-drawer>
</template>
<script setup lang="ts" name="personal">
import { useUserInfo } from '/@/stores/userInfo';
import { editInfo, getObj, password, UnbindingUser } from '/@/api/admin/user';
import { useMessage } from '/@/hooks/message';
import { rule } from '/@/utils/validate';
import {useUserInfo} from '/@/stores/userInfo';
import {editInfo, getObj, password, UnbindingUser} from '/@/api/admin/user';
import {useMessage} from '/@/hooks/message';
import {rule} from '/@/utils/validate';
import other from '/@/utils/other';
import { Session } from '/@/utils/storage';
import { useI18n } from 'vue-i18n';
import {Session} from '/@/utils/storage';
import {useI18n} from 'vue-i18n';
const { t } = useI18n();
const {t} = useI18n();
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
const StrengthMeter = defineAsyncComponent(() => import('/@/components/StrengthMeter/index.vue'));
@ -121,203 +108,144 @@ const visible = ref(false);
// 定义变量内容
const formData = ref({
userId: '',
username: '',
name: '',
email: '',
avatar: '',
nickname: '',
phone: ('' as string) || undefined,
userId: '',
username: '',
name: '',
email: '',
avatar: '',
nickname: '',
phone: ('' as string) || undefined,
});
const passwordFormData = reactive({
password: '',
newpassword1: '',
newpassword2: '',
password: '',
newpassword1: '',
newpassword2: '',
});
const formdataRef = ref();
const passwordFormdataRef = ref();
const ruleForm = reactive({
phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ validator: rule.validatePhone, trigger: 'blur' },
],
nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
phone: [
{required: true, message: '手机号不能为空', trigger: 'blur'},
{validator: rule.validatePhone, trigger: 'blur'},
],
nickname: [{required: true, message: '昵称不能为空', trigger: 'blur'}],
email: [{required: true, message: '邮箱不能为空', trigger: 'blur'}],
name: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
});
const validatorPassword2 = (rule: any, value: any, callback: any) => {
if (value !== passwordFormData.newpassword1) {
callback(new Error(t('personal.passwordRule')));
} else {
callback();
}
if (value !== passwordFormData.newpassword1) {
callback(new Error(t('personal.passwordRule')));
} else {
callback();
}
};
const validatorScore = (rule: any, value: any, callback: any) => {
if (score.value <= 1) {
callback(new Error(t('personal.passwordScore')));
} else {
callback();
}
if (score.value <= 1) {
callback(new Error(t('personal.passwordScore')));
} else {
callback();
}
};
const passwordRuleForm = reactive({
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
newpassword1: [
{
min: 6,
max: 20,
message: '用户密码长度必须介于 6 和 20 之间',
trigger: 'blur',
},
{ validator: validatorScore, trigger: 'blur' },
],
newpassword2: [
{
min: 6,
max: 20,
message: '用户密码长度必须介于 6 和 20 之间',
trigger: 'blur',
},
{ validator: validatorPassword2, trigger: 'blur' },
],
password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
newpassword1: [
{
min: 6,
max: 20,
message: '用户密码长度必须介于 6 和 20 之间',
trigger: 'blur',
},
{validator: validatorScore, trigger: 'blur'},
],
newpassword2: [
{
min: 6,
max: 20,
message: '用户密码长度必须介于 6 和 20 之间',
trigger: 'blur',
},
{validator: validatorPassword2, trigger: 'blur'},
],
});
const score = ref(0);
const passwordScore = (e) => {
score.value = e;
const passwordScore = (e: any) => {
score.value = e;
};
const handleChangePassword = () => {
passwordFormdataRef.value.validate((valid: boolean) => {
if (!valid) {
return false;
}
password(passwordFormData)
.then(() => {
useMessage().success('修改成功');
// 需要重新登录
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
})
.catch((err) => {
useMessage().error(err.msg);
});
});
passwordFormdataRef.value.validate((valid: boolean) => {
if (!valid) {
return false;
}
password(passwordFormData)
.then(() => {
useMessage().success('修改成功');
// 需要重新登录
// 清除缓存/token等
Session.clear();
// 使用 reload 时，不需要调用 resetRoute() 重置路由
window.location.reload();
})
.catch((err) => {
useMessage().error(err.msg);
});
});
};
// 保存用户
const handleSaveUser = () => {
formdataRef.value.validate((valid: boolean) => {
if (!valid) {
return false;
}
formdataRef.value.validate((valid: boolean) => {
if (!valid) {
return false;
}
if (formData.value.phone && formData.value.phone.indexOf('*') >= 0) {
formData.value.phone = undefined;
}
if (formData.value.phone && formData.value.phone.indexOf('*') >= 0) {
formData.value.phone = undefined;
}
editInfo(formData.value)
.then(() => {
useMessage().success('修改成功');
// 更新上下文的 user信息
useUserInfo().setUserInfos();
})
.catch((err) => {
useMessage().error(err.msg);
});
});
};
const handleClick = (thirdpart: string) => {
let appid, client_id, redirect_uri, url;
redirect_uri = encodeURIComponent(window.location.origin + '/#/authredirect');
if (thirdpart === 'wechat') {
appid = 'wxd1678d3f83b1d83a';
url = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${redirect_uri}&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect`;
} else if (thirdpart === 'tencent') {
client_id = '101322838';
url = `https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
} else if (thirdpart === 'gitee') {
client_id = '0c29cfd9cb1e0037fc837521bc08c1a7483d8fd9b3e123d46beec59a5544a881';
url = `https://gitee.com/oauth/authorize?response_type=code&state=GITEE-BIND&client_id=${client_id}&redirect_uri=${redirect_uri}`;
} else if (thirdpart === 'osc') {
client_id = 'neIIqlwGsjsfsA6uxNqD';
url = `https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=${client_id}&state=OSC-BIND&redirect_uri=${redirect_uri}`;
}
other.openWindow(url, thirdpart, 540, 540);
editInfo(formData.value)
.then(() => {
useMessage().success('修改成功');
// 更新上下文的 user信息
useUserInfo().setUserInfos();
})
.catch((err) => {
useMessage().error(err.msg);
});
});
};
const open = () => {
visible.value = true;
const data = useUserInfo().userInfos;
initUserInfo(data.user.userId);
// Object.assign(formData, data.user);
visible.value = true;
const data = useUserInfo().userInfos;
initUserInfo(data.user.userId);
// Object.assign(formData, data.user);
};
const loading = ref(false);
const initUserInfo = (userId: any) => {
loading.value = true;
getObj(userId)
.then((res) => {
formData.value = res.data;
initSocialList();
})
.catch((err) => {
useMessage().error(err.msg);
})
.finally(() => {
loading.value = false;
});
};
const socialList = ref([] as any);
const initSocialList = () => {
socialList.value = [
{
name: '微信公众号',
type: 'wechat',
openId: formData.value.wxOpenid,
},
{
name: 'QQ',
type: 'tencent',
openId: formData.value.qqOpenid,
},
{
name: 'gitee',
type: 'gitee',
openId: formData.value.giteeOpenId,
},
{
name: '开源中国',
type: 'osc',
openId: formData.value.oscOpenId,
},
];
};
const Unbinding = (type) => {
UnbindingUser(type)
.then(() => {
useMessage().success('解绑成功');
})
.catch((err) => {
useMessage().error(err.msg);
})
.finally(() => {
initUserInfo(formData.value.userId);
});
loading.value = true;
getObj(userId)
.then((res) => {
formData.value = res.data;
})
.catch((err) => {
useMessage().error(err.msg);
})
.finally(() => {
loading.value = false;
});
};
// 暴露变量
defineExpose({
open,
open,
});
</script>
@ -325,211 +253,211 @@ defineExpose({
@import '/@/theme/mixins/index.scss';
.personal {
.personal-user {
height: 130px;
display: flex;
align-items: center;
.personal-user {
height: 130px;
display: flex;
align-items: center;
.personal-user-left {
width: 180px;
height: 130px;
border-radius: 3px;
.personal-user-left {
width: 180px;
height: 130px;
border-radius: 3px;
:deep(.el-upload) {
height: 100%;
}
:deep(.el-upload) {
height: 100%;
}
.personal-user-left-upload {
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
.personal-user-left-upload {
img {
width: 100%;
height: 100%;
border-radius: 3px;
}
&:hover {
img {
animation: logoAnimation 0.3s ease-in-out;
}
}
}
}
&:hover {
img {
animation: logoAnimation 0.3s ease-in-out;
}
}
}
}
.personal-user-right {
flex: 1;
padding: 0 15px;
.personal-user-right {
flex: 1;
padding: 0 15px;
.personal-title {
font-size: 18px;
@include text-ellipsis(1);
}
.personal-title {
font-size: 18px;
@include text-ellipsis(1);
}
.personal-item {
display: flex;
align-items: center;
font-size: 13px;
.personal-item {
display: flex;
align-items: center;
font-size: 13px;
.personal-item-label {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
}
.personal-item-label {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
}
.personal-item-value {
@include text-ellipsis(1);
}
}
}
}
.personal-item-value {
@include text-ellipsis(1);
}
}
}
}
.personal-info {
.personal-info-more {
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
.personal-info {
.personal-info-more {
float: right;
color: var(--el-text-color-secondary);
font-size: 13px;
&:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
&:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
.personal-info-box {
height: 130px;
overflow: hidden;
.personal-info-box {
height: 130px;
overflow: hidden;
.personal-info-ul {
list-style: none;
.personal-info-ul {
list-style: none;
.personal-info-li {
font-size: 13px;
padding-bottom: 10px;
.personal-info-li {
font-size: 13px;
padding-bottom: 10px;
.personal-info-li-title {
display: inline-block;
@include text-ellipsis(1);
color: var(--el-text-color-secondary);
text-decoration: none;
}
.personal-info-li-title {
display: inline-block;
@include text-ellipsis(1);
color: var(--el-text-color-secondary);
text-decoration: none;
}
& a:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
}
}
}
& a:hover {
color: var(--el-color-primary);
cursor: pointer;
}
}
}
}
}
.personal-recommend-row {
.personal-recommend-col {
.personal-recommend {
position: relative;
height: 100px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
.personal-recommend-row {
.personal-recommend-col {
.personal-recommend {
position: relative;
height: 100px;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
&:hover {
i {
right: 0px !important;
bottom: 0px !important;
transition: all ease 0.3s;
}
}
&:hover {
i {
right: 0px !important;
bottom: 0px !important;
transition: all ease 0.3s;
}
}
i {
position: absolute;
right: -10px;
bottom: -10px;
font-size: 70px;
transform: rotate(-30deg);
transition: all ease 0.3s;
}
i {
position: absolute;
right: -10px;
bottom: -10px;
font-size: 70px;
transform: rotate(-30deg);
transition: all ease 0.3s;
}
.personal-recommend-auto {
padding: 15px;
position: absolute;
left: 0;
top: 5%;
color: var(--next-color-white);
.personal-recommend-auto {
padding: 15px;
position: absolute;
left: 0;
top: 5%;
color: var(--next-color-white);
.personal-recommend-msg {
font-size: 12px;
margin-top: 10px;
}
}
}
}
}
.personal-recommend-msg {
font-size: 12px;
margin-top: 10px;
}
}
}
}
}
.personal-edit {
.personal-edit-title {
position: relative;
padding-left: 10px;
color: var(--el-text-color-regular);
.personal-edit {
.personal-edit-title {
position: relative;
padding-left: 10px;
color: var(--el-text-color-regular);
&::after {
content: '';
width: 2px;
height: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--el-color-primary);
}
}
&::after {
content: '';
width: 2px;
height: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: var(--el-color-primary);
}
}
.personal-edit-safe-box {
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
padding: 15px 0;
.personal-edit-safe-box {
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
padding: 15px 0;
.personal-edit-safe-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.personal-edit-safe-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.personal-edit-safe-item-left {
flex: 1;
overflow: hidden;
.personal-edit-safe-item-left {
flex: 1;
overflow: hidden;
.personal-edit-safe-item-left-label {
color: var(--el-text-color-regular);
margin-bottom: 5px;
}
.personal-edit-safe-item-left-label {
color: var(--el-text-color-regular);
margin-bottom: 5px;
}
.personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
margin-right: 15px;
}
}
}
.personal-edit-safe-item-left-value {
color: var(--el-text-color-secondary);
@include text-ellipsis(1);
margin-right: 15px;
}
}
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
}
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
}
}
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 100%;
width: 178px;
height: 100%;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>