perf: 优化移动端兼容

This commit is contained in:
kuaifan 2023-04-25 10:33:25 +08:00
parent 900b11280c
commit 9771e1e741
63 changed files with 278 additions and 215 deletions

View File

@ -13,12 +13,12 @@
<!--右下角客户端-->
<RightBottom/>
<!--网络提示-->
<NetworkException v-if="windowLarge"/>
<!--图片预览-->
<PreviewImageState/>
<!--网络提示-->
<NetworkException v-if="windowLandscape"/>
<!--Hidden IFrame-->
<iframe v-for="item in iframes" :key="item.key" v-if="item.url" v-show="false" :src="item.url"></iframe>
</div>
@ -73,7 +73,7 @@ export default {
},
computed: {
...mapState(['ws', 'themeMode', 'supportTouch']),
...mapState(['ws', 'themeMode', 'windowOrientation']),
isSoftware() {
return this.$Electron || this.$isEEUiApp;
@ -139,17 +139,25 @@ export default {
immediate: true
},
supportTouch: {
windowTouch: {
handler(support) {
if (support) {
$A("body").addClass("support-touch")
$A("body").addClass("window-touch")
} else {
$A("body").removeClass("support-touch")
$A("body").removeClass("window-touch")
}
},
immediate: true
},
windowOrientation: {
handler(direction) {
$A("body").removeClass(["window-landscape", "window-portrait"])
$A("body").addClass("window-" + direction)
},
immediate: true
},
windowActive(active) {
if (active) {
this.__windowTimer && clearTimeout(this.__windowTimer)
@ -223,12 +231,21 @@ export default {
},
windowSizeListener() {
this.$store.state.windowWidth = $A(window).width()
this.$store.state.windowHeight = $A(window).height()
this.$store.state.windowLarge = this.$store.state.windowWidth > 834
this.$store.state.windowSmall = this.$store.state.windowWidth <= 834
this.$store.state.formLabelPosition = this.$store.state.windowWidth > 576 ? 'right' : 'top'
this.$store.state.formLabelWidth = this.$store.state.windowWidth > 576 ? 'auto' : ''
const windowWidth = $A(window).width(),
windowHeight = $A(window).height(),
windowOrientation = $A.strExists(window.screen.orientation.type, 'portrait') ? 'portrait' : 'landscape'
this.$store.state.windowTouch = "ontouchend" in document
this.$store.state.windowWidth = windowWidth
this.$store.state.windowHeight = windowHeight
this.$store.state.windowOrientation = windowOrientation
this.$store.state.windowLandscape = windowOrientation === 'landscape'
this.$store.state.windowPortrait = windowOrientation === 'portrait'
this.$store.state.formLabelPosition = windowWidth > 576 ? 'right' : 'top'
this.$store.state.formLabelWidth = windowWidth > 576 ? 'auto' : ''
},
windowScrollListener() {

View File

@ -4,7 +4,7 @@
:placement="placement"
:effect="tooltipTheme"
:delay="delay"
:disabled="windowSmall || $isEEUiApp || !showTooltip || disabled"
:disabled="$isEEUiApp || windowTouch || !showTooltip || disabled"
:max-width="tooltipMaxWidth"
transfer>
<span ref="content" @mouseenter="handleTooltipIn" class="common-auto-tip" @click="onClick">

View File

@ -1,5 +1,5 @@
<template>
<ETooltip :disabled="windowSmall || $isEEUiApp || content == ''" :content="content">
<ETooltip :disabled="$isEEUiApp || windowTouch || content == ''" :content="content">
<svg v-if="type === 'svg'" viewBox="25 25 50 50" class="common-loading">
<circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="common-path"></circle>
</svg>

View File

@ -1,6 +1,6 @@
<template>
<div class="mobile-tabbar">
<NetworkException v-if="windowSmall" type="alert"/>
<NetworkException v-if="windowPortrait" type="alert"/>
<transition name="mobile-fade">
<div v-if="isMore" class="more-mask" @click="toggleRoute('more')"></div>
</transition>

View File

@ -108,7 +108,7 @@ export default {
if (this.mode) {
return this.mode
}
return this.$store.state.windowLarge ? 'desktop' : 'mobile'
return this.windowTouch ? 'mobile' : 'desktop'
}
}
};

View File

@ -1,32 +1,6 @@
<template>
<div class="component-resize-line" :class="[resizing ? 'resizing' : '', placement]" @mousedown.left.stop.prevent="resizeDown"></div>
</template>
<style lang="scss" scoped>
.component-resize-line {
cursor: col-resize;
@media (max-width: 834px) {
display: none;
}
&.resizing {
&:after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
cursor: col-resize;
}
}
&.bottom {
cursor: row-resize;
&:after {
cursor: row-resize;
}
}
}
</style>
<script>
export default {
name: 'ResizeLine',

View File

@ -106,7 +106,7 @@ export default {
},
showDown() {
return !this.$isEEUiApp && this.windowLarge && ['login', 'index', 'manage-dashboard'].includes(this.$route.name)
return !this.$isEEUiApp && !this.windowTouch && ['login', 'index', 'manage-dashboard'].includes(this.$route.name)
},
showPrivacy() {

View File

@ -12,7 +12,7 @@
v-if="item.hidden !== true"
placement="top"
:key="key"
:disabled="windowSmall || $isEEUiApp || !item.title"
:disabled="$isEEUiApp || windowTouch || !item.title"
:content="item.title"
:enterable="false"
:open-delay="600">

View File

@ -3,7 +3,7 @@
v-if="user"
class="common-avatar"
:open-delay="openDelay"
:disabled="windowSmall || $isEEUiApp || tooltipDisabled || isBot"
:disabled="$isEEUiApp || windowTouch || tooltipDisabled || isBot"
:placement="tooltipPlacement">
<div slot="content" class="common-avatar-transfer">
<slot/>

View File

@ -6,7 +6,7 @@
<div class="login-box">
<div class="login-mode-switch">
<div class="login-mode-switch-box">
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="$L(loginMode=='qrcode' ? '帐号登录' : '扫码登录')" placement="left">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="$L(loginMode=='qrcode' ? '帐号登录' : '扫码登录')" placement="left">
<span class="login-mode-switch-icon" @click="switchLoginMode">
<svg v-if="loginMode=='qrcode'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="PcOutlined"><path d="M23 16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v12ZM21 4H3v9h18V4ZM3 15v1h18v-1H3Zm3 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z" fill="currentColor"></path></svg>
<svg v-else viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="QrOutlined"><path d="M6.5 7.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Z" fill="currentColor"></path><path d="M4.5 2.5c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2h-7Zm0 2h7v7h-7v-7ZM11 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm0 3.5a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm4-7.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm3.5 0a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1ZM15 17c0-1.1.9-2 2-2h2.5c1.1 0 2 .9 2 2v2.5c0 1.1-.9 2-2 2H17c-1.1 0-2-.9-2-2V17Zm4.5 0H17v2.5h2.5V17Zm-15-2c-1.1 0-2 .9-2 2v2.5c0 1.1.9 2 2 2H7c1.1 0 2-.9 2-2V17c0-1.1-.9-2-2-2H4.5Zm0 2H7v2.5H4.5V17ZM15 4.5c0-1.1.9-2 2-2h2.5c1.1 0 2 .9 2 2V7c0 1.1-.9 2-2 2H17c-1.1 0-2-.9-2-2V4.5Zm4.5 0H17V7h2.5V4.5Z" fill="currentColor"></path></svg>

View File

@ -152,7 +152,7 @@
<div class="operate-position" :style="operateStyles" v-show="operateVisible">
<Dropdown
trigger="custom"
:placement="windowLarge ? 'bottom' : 'top'"
:placement="windowLandscape ? 'bottom' : 'top'"
:visible="operateVisible"
@on-clickoutside="operateVisible = false"
transfer>

View File

@ -106,7 +106,7 @@ export default {
'month.dayname.borderLeft': '1px solid rgba(0,0,0,0)',
'month.dayname.height': '50px',
}
if (this.windowLarge) {
if (this.windowLandscape) {
this.calendarTheme = {
'common.border': '1px solid #f4f5f5',
'month.dayname.fontSize': '14px',

View File

@ -45,24 +45,24 @@
:visibleArrow="false"
placement="top"
popperClass="chat-input-emoji-popover">
<ETooltip slot="reference" ref="emojiTip" :disabled="windowSmall || $isEEUiApp || showEmoji" placement="top" :content="$L('表情')">
<ETooltip slot="reference" ref="emojiTip" :disabled="$isEEUiApp || windowTouch || showEmoji" placement="top" :content="$L('表情')">
<i class="taskfont">&#xe7ad;</i>
</ETooltip>
<ChatEmoji v-if="showEmoji" @on-select="onSelectEmoji" :searchKey="emojiQuickKey"/>
</EPopover>
<ETooltip v-else ref="emojiTip" :disabled="windowSmall || $isEEUiApp || showEmoji" placement="top" :content="$L('表情')">
<ETooltip v-else ref="emojiTip" :disabled="$isEEUiApp || windowTouch || showEmoji" placement="top" :content="$L('表情')">
<i class="taskfont" @click="showEmoji=!showEmoji">&#xe7ad;</i>
</ETooltip>
</li>
<!-- @ # -->
<li>
<ETooltip placement="top" :disabled="windowSmall || $isEEUiApp" :content="$L('选择成员')">
<ETooltip placement="top" :disabled="$isEEUiApp || windowTouch" :content="$L('选择成员')">
<i class="taskfont" @click="onToolbar('user')">&#xe78f;</i>
</ETooltip>
</li>
<li>
<ETooltip placement="top" :disabled="windowSmall || $isEEUiApp" :content="$L('选择任务')">
<ETooltip placement="top" :disabled="$isEEUiApp || windowTouch" :content="$L('选择任务')">
<i class="taskfont" @click="onToolbar('task')">&#xe7d6;</i>
</ETooltip>
</li>
@ -74,7 +74,7 @@
:visibleArrow="false"
placement="top"
popperClass="chat-input-more-popover">
<ETooltip slot="reference" ref="moreTip" :disabled="windowSmall || $isEEUiApp || showMore" placement="top" :content="$L('展开')">
<ETooltip slot="reference" ref="moreTip" :disabled="$isEEUiApp || windowTouch || showMore" placement="top" :content="$L('展开')">
<i class="taskfont">&#xe790;</i>
</ETooltip>
<div v-if="recordReady" class="chat-input-popover-item" @click="onToolbar('meeting')">
@ -113,7 +113,7 @@
trigger="manual"
placement="top"
popperClass="chat-input-more-popover">
<ETooltip slot="reference" ref="sendTip" placement="top" :disabled="windowSmall || $isEEUiApp || showMenu" :content="$L(sendContent)">
<ETooltip slot="reference" ref="sendTip" placement="top" :disabled="$isEEUiApp || windowTouch || showMenu" :content="$L(sendContent)">
<div v-if="loading">
<div class="chat-load">
<Loading/>
@ -338,7 +338,7 @@ export default {
if (typeof this.enterSend === "boolean") {
return this.enterSend;
} else {
return this.$store.state.windowLarge
return !this.windowTouch
}
},
@ -557,7 +557,7 @@ export default {
if (this.isSpecVersion) {
// ios11.0-11.3 scrollTopscrolIntoViewbug
//
} else if (this.windowSmall) {
} else if (this.windowPortrait) {
this.timerScroll = setInterval(() => {
if (this.quill?.hasFocus()) {
this.windowScrollY > 0 && $A.scrollIntoViewIfNeeded(this.$refs.editor);
@ -1065,7 +1065,7 @@ export default {
if (item.type === 'emoji') {
this.quill.insertText(this.rangeIndex, item.text);
this.rangeIndex += item.text.length
if (this.windowLarge) {
if (this.windowLandscape) {
this.showEmoji = false;
}
} else if (item.type === 'emoticon') {
@ -1073,7 +1073,7 @@ export default {
if (item.asset === "emosearch") {
this.$emit('input', "")
}
if (this.windowLarge) {
if (this.windowLandscape) {
this.showEmoji = false;
}
}

View File

@ -8,7 +8,7 @@
:beforeClose="onBeforeClose"
class-name="dialog-modal"
fullscreen>
<DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
<DialogWrapper v-if="windowPortrait && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
</Modal>
</template>
@ -61,7 +61,7 @@ export default {
...mapState(['dialogId']),
visible() {
return this.dialogId > 0 && this.windowSmall
return this.dialogId > 0 && this.windowPortrait
}
},

View File

@ -212,7 +212,7 @@
ref="input"
v-model="msgText"
:dialog-id="dialogId"
:emoji-bottom="windowSmall"
:emoji-bottom="windowPortrait"
:maxlength="200000"
@on-focus="onEventFocus"
@on-blur="onEventBlur"
@ -1517,7 +1517,7 @@ export default {
},
onTouchMove(e) {
if (this.windowSmall && this.windowScrollY > 0) {
if (this.windowPortrait && this.windowScrollY > 0) {
if (this.wrapperStart.exclud) {
e.preventDefault();
return;
@ -1680,7 +1680,7 @@ export default {
},
onEventEmojiVisibleChange(val) {
if (val && this.windowSmall) {
if (val && this.windowPortrait) {
this.onToBottom();
}
},
@ -1744,7 +1744,7 @@ export default {
if (!this.dialogData.group_info) {
return;
}
if (this.windowSmall) {
if (this.windowPortrait) {
this.$store.dispatch("openDialog", 0);
}
this.goForward({name: 'manage-project', params: {projectId:this.dialogData.group_info.id}});
@ -2302,7 +2302,7 @@ export default {
break;
case 'filepos':
if (this.windowSmall) {
if (this.windowPortrait) {
this.$store.dispatch("openDialog", 0);
}
this.goForward({name: 'manage-file', params: value});

View File

@ -55,14 +55,14 @@
</Dropdown>
<template v-if="!file.only_view">
<div class="header-icons">
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="$L('文件链接')">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="$L('文件链接')">
<div class="header-icon" @click="handleClick('link')"><i class="taskfont">&#xe785;</i></div>
</ETooltip>
<EPopover v-model="historyShow" trigger="click">
<div class="file-content-history">
<FileHistory :value="historyShow" :file="file" @on-restore="onRestoreHistory"/>
</div>
<ETooltip slot="reference" ref="historyTip" :disabled="windowSmall || $isEEUiApp || historyShow" :content="$L('历史版本')">
<ETooltip slot="reference" ref="historyTip" :disabled="$isEEUiApp || windowTouch || historyShow" :content="$L('历史版本')">
<div class="header-icon"><i class="taskfont">&#xe71d;</i></div>
</ETooltip>
</EPopover>

View File

@ -66,7 +66,7 @@
<Button type="primary" :loading="videoLoad" @click="onVideo">
<i class="taskfont" v-html="localUser.videoTrack ? '&#xe7c1;' : '&#xe7c8;'"></i>
</Button>
<template v-if="windowSmall">
<template v-if="windowPortrait">
<Button type="primary" @click="onInvitation('open')">
<i class="taskfont">&#xe646;</i>
</Button>

View File

@ -43,7 +43,7 @@
:current="page"
:page-size="pageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer

View File

@ -41,7 +41,7 @@ export default {
...mapGetters(['projectData']),
dialogShow() {
return this.windowLarge && this.projectData.dialog_id && this.projectData.cacheParameter.chat
return this.windowLandscape && this.projectData.dialog_id && this.projectData.cacheParameter.chat
}
},

View File

@ -55,7 +55,7 @@
<div class="operate-position" :style="operateStyles" v-show="operateVisible">
<Dropdown
trigger="custom"
:placement="windowLarge ? 'bottom' : 'top'"
:placement="windowLandscape ? 'bottom' : 'top'"
:visible="operateVisible"
@on-clickoutside="operateVisible = false"
transfer>

View File

@ -67,7 +67,7 @@
:current="page"
:page-size="pageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer

View File

@ -20,7 +20,7 @@
</li>
<template v-if="!(windowWidth <= 980 || projectData.cacheParameter.chat) && projectUser.length > 0" v-for="item in projectUser">
<li v-if="item.userid === -1" class="more">
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="$L('共' + (projectData.project_user.length) + '个成员')">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="$L('共' + (projectData.project_user.length) + '个成员')">
<Icon type="ios-more"/>
</ETooltip>
</li>
@ -31,7 +31,7 @@
</ul>
</li>
<li class="project-icon" @click="addTaskOpen(0)">
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="$L('添加任务')">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="$L('添加任务')">
<Icon class="menu-icon" type="md-add" />
</ETooltip>
</li>
@ -43,7 +43,7 @@
</div>
</Tooltip>
</li>
<li :class="['project-icon', windowLarge && projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')">
<li :class="['project-icon', windowLandscape && projectData.cacheParameter.chat ? 'active' : '']" @click="toggleParameter('chat')">
<Icon class="menu-icon" type="ios-chatbubbles" />
<Badge class="menu-badge" :overflow-count="999" :count="msgUnread"></Badge>
</li>
@ -95,7 +95,7 @@
<Draggable
:list="columnList"
:animation="150"
:disabled="sortDisabled || windowSmall || $isEEUiApp"
:disabled="sortDisabled || $isEEUiApp || windowTouch"
class="column-list"
tag="ul"
draggable=".column-item"
@ -150,7 +150,7 @@
<Draggable
:list="column.tasks"
:animation="150"
:disabled="sortDisabled || windowSmall || $isEEUiApp"
:disabled="sortDisabled || $isEEUiApp || windowTouch"
class="task-list"
draggable=".task-draggable"
filter=".complete"
@ -195,7 +195,7 @@
<ETooltip
v-if="item.end_at"
:class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
:disabled="windowSmall || $isEEUiApp"
:disabled="$isEEUiApp || windowTouch"
:open-delay="600"
:content="item.end_at">
<div v-if="!item.complete_at"><i class="taskfont">&#xe71d;</i>{{ expiresFormat(item.end_at) }}</div>
@ -876,7 +876,7 @@ export default {
methods: {
showName() {
if (this.windowLarge) {
if (this.windowLandscape) {
return;
}
$A.modalInfo({
@ -887,7 +887,7 @@ export default {
},
showDesc() {
if (this.windowLarge) {
if (this.windowLandscape) {
return;
}
$A.modalInfo({
@ -1477,7 +1477,7 @@ export default {
if (data === 'completedTask') {
this.$store.dispatch("forgetTaskCompleteTemp", true);
} else if (data === 'chat') {
if (this.windowSmall) {
if (this.windowPortrait) {
this.$store.dispatch('openDialog', this.projectData.dialog_id)
return;
}

View File

@ -67,7 +67,7 @@
<Draggable
:list="data.project_flow_item"
:animation="150"
:disabled="windowSmall || $isEEUiApp"
:disabled="$isEEUiApp || windowTouch"
class="taskflow-config-table-list-wrapper"
tag="div"
draggable=".column-border"

View File

@ -12,13 +12,13 @@
<Radio label="daily" :disabled="id > 0 && reportData.type =='weekly'">{{ $L("日报") }}</Radio>
</RadioGroup>
<ButtonGroup v-if="id === 0" class="report-buttongroup">
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="prevCycleText" placement="bottom">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="prevCycleText" placement="bottom">
<Button type="primary" @click="prevCycle">
<Icon type="ios-arrow-back" />
</Button>
</ETooltip>
<div class="report-buttongroup-vertical"></div>
<ETooltip :disabled="windowSmall || $isEEUiApp || reportData.offset >= 0" :content="nextCycleText" placement="bottom">
<ETooltip :disabled="$isEEUiApp || windowTouch || reportData.offset >= 0" :content="nextCycleText" placement="bottom">
<Button type="primary" @click="nextCycle" :disabled="reportData.offset >= 0">
<Icon type="ios-arrow-forward" />
</Button>

View File

@ -59,7 +59,7 @@
:current="listPage"
:page-size="listPageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer

View File

@ -73,7 +73,7 @@
:current="listPage"
:page-size="listPageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer

View File

@ -31,7 +31,7 @@
:plugins="taskPlugins"
:options="taskOptions"
:option-full="taskOptionFull"
:placeholder="$L(windowLarge ? '详细描述,选填...(点击右键使用工具栏)' : '详细描述,选填...')"
:placeholder="$L(windowLandscape ? '详细描述,选填...(点击右键使用工具栏)' : '详细描述,选填...')"
:placeholderFull="$L('详细描述...')"
inline/>
</div>
@ -39,7 +39,7 @@
<Button :class="{advanced: advanced}" @click="advanced=!advanced">{{$L('高级选项')}}</Button>
<ul class="advanced-priority">
<li v-for="(item, key) in taskPriority" :key="key">
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="taskPriorityContent(item)">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="taskPriorityContent(item)">
<i
class="taskfont"
:style="{color:item.color}"
@ -87,7 +87,7 @@
:transfer="false"/>
<div v-if="showAddAssist" class="task-add-assist">
<Checkbox v-model="addData.add_assist" :true-value="1" :false-value="0">{{$L('加入任务协助人员列表')}}</Checkbox>
<ETooltip :disabled="windowSmall || $isEEUiApp" :content="$L('你不是任务负责人时建议加入任务协助人员列表')">
<ETooltip :disabled="$isEEUiApp || windowTouch" :content="$L('你不是任务负责人时建议加入任务协助人员列表')">
<Icon type="ios-alert-outline" />
</ETooltip>
</div>

View File

@ -17,7 +17,7 @@
<div v-if="parentId == 0" class="priority">
<ul>
<li v-for="(item, key) in taskPriority" :key="key">
<ETooltip v-if="active" :disabled="windowSmall || $isEEUiApp" :content="taskPriorityContent(item)">
<ETooltip v-if="active" :disabled="$isEEUiApp || windowTouch" :content="taskPriorityContent(item)">
<i
class="taskfont"
:style="{color:item.color}"
@ -57,7 +57,7 @@
<div class="priority">
<ul>
<li v-for="(item, key) in taskPriority" :key="key">
<ETooltip v-if="active" :disabled="windowSmall || $isEEUiApp" :content="taskPriorityContent(item)">
<ETooltip v-if="active" :disabled="$isEEUiApp || windowTouch" :content="taskPriorityContent(item)">
<i
class="taskfont"
:style="{color:item.color}"

View File

@ -43,7 +43,7 @@
:current="page"
:page-size="pageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer

View File

@ -43,7 +43,7 @@
:current="page"
:page-size="pageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer

View File

@ -122,7 +122,7 @@
</div>
<Button slot="reference" :loading="ownerLoad > 0" class="pick" type="primary">{{$L('我要领取任务')}}</Button>
</EPopover>
<ETooltip v-if="$Electron" :disabled="windowSmall || $isEEUiApp" :content="$L('新窗口打开')">
<ETooltip v-if="$Electron" :disabled="$isEEUiApp || windowTouch" :content="$L('新窗口打开')">
<i class="taskfont open" @click="openNewWin">&#xe776;</i>
</ETooltip>
<div class="menu">
@ -287,7 +287,7 @@
trigger="click"
placement="bottom"
@command="updateData('loop', $event)">
<ETooltip :disabled="windowSmall || $isEEUiApp || !taskDetail.loop_at" :content="`${$L('下个周期')}: ${taskDetail.loop_at}`" placement="right">
<ETooltip :disabled="$isEEUiApp || windowTouch || !taskDetail.loop_at" :content="`${$L('下个周期')}: ${taskDetail.loop_at}`" placement="right">
<span>{{$L(loopLabel(taskDetail.loop))}}</span>
</ETooltip>
<EDropdownMenu slot="dropdown" class="task-detail-loop">
@ -665,7 +665,7 @@ export default {
},
hasOpenDialog() {
return this.taskDetail.dialog_id > 0 && this.windowLarge;
return this.taskDetail.dialog_id > 0 && this.windowLandscape;
},
dialogStyle() {
@ -810,7 +810,7 @@ export default {
if (id > 0) {
this.ready = true;
} else {
if (this.windowSmall) {
if (this.windowPortrait) {
$A.onBlur();
}
this.timeOpen = false;
@ -1287,7 +1287,7 @@ export default {
});
} else {
this.$nextTick(() => {
if (this.windowSmall) {
if (this.windowPortrait) {
$A.onBlur();
const transferData = {
time: $A.Time() + 10,

View File

@ -86,7 +86,7 @@
<ETooltip
v-if="!item.complete_at && item.end_at"
:class="['task-time', item.today ? 'today' : '', item.overdue ? 'overdue' : '']"
:disabled="windowSmall || $isEEUiApp"
:disabled="$isEEUiApp || windowTouch"
:open-delay="600"
:content="item.end_at">
<div @click="openTask(item)">{{expiresFormat(item.end_at)}}</div>

View File

@ -144,7 +144,7 @@
:current="page"
:page-size="pageSize"
:disabled="loadIng > 0"
:simple="windowSmall"
:simple="windowPortrait"
:page-size-opts="[10,20,30,50,100]"
show-elevator
show-sizer
@ -769,7 +769,7 @@ export default {
departmentSelect() {
this.setPage(1)
},
windowSmall: {
windowPortrait: {
handler(v) {
this.minBox = v
},
@ -1082,7 +1082,7 @@ export default {
},
onSelectDepartment(id) {
if (this.windowSmall) {
if (this.windowPortrait) {
this.minBox = true
}
//

View File

@ -72,7 +72,7 @@
<i class="taskfont">&#xe71f;</i>
<em>{{item.sub_complete}}/{{item.sub_num}}</em>
</div>
<ETooltip v-if="item.end_at" :disabled="windowSmall || $isEEUiApp" :content="item.end_at" placement="right">
<ETooltip v-if="item.end_at" :disabled="$isEEUiApp || windowTouch" :content="item.end_at" placement="right">
<div :class="['item-icon', item.today ? 'today' : '', item.overdue ? 'overdue' : '']">
<i class="taskfont">&#xe71d;</i>
<em>{{expiresFormat(item.end_at)}}</em>

View File

@ -813,7 +813,7 @@ export default {
},
isPreview() {
return this.windowSmall || this.fileInfo.permission === 0
return this.windowPortrait || this.fileInfo.permission === 0
},
isParentShare() {
@ -841,7 +841,7 @@ export default {
},
tableHeight() {
if (this.windowLarge) {
if (this.windowLandscape) {
return Math.max(300, this.windowHeight - 160)
} else {
return Math.max(300, this.windowHeight - 200)
@ -871,7 +871,7 @@ export default {
fileShow(val) {
if (!val) {
this.browseFile(0)
if (this.windowSmall) {
if (this.windowPortrait) {
$A.onBlur(true)
}
}
@ -978,7 +978,7 @@ export default {
},
handleContextmenu(event) {
if (this.windowLarge) {
if (this.windowLandscape) {
this.handleRightClick(event)
}
},

View File

@ -145,7 +145,7 @@
<div class="operate-position" :style="operateStyles" v-show="operateVisible">
<Dropdown
trigger="custom"
:placement="windowLarge ? 'bottom' : 'top'"
:placement="windowLandscape ? 'bottom' : 'top'"
:visible="operateVisible"
@on-clickoutside="operateVisible = false"
transfer>
@ -180,7 +180,7 @@
<div class="msg-dialog-bg-icon"><Icon type="ios-chatbubbles" /></div>
<div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
</div>
<DialogWrapper v-if="windowLarge && dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive" :auto-focus="$A.isDesktop()"/>
<DialogWrapper v-if="windowLandscape && dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive" :auto-focus="$A.isDesktop()"/>
</div>
</div>
</div>
@ -624,7 +624,7 @@ export default {
}
this.$set(user, 'loading', true);
this.$store.dispatch("openDialogUserid", user.userid).then(_ => {
if (this.windowLarge) {
if (this.windowLandscape) {
this.tabActive = 'dialog';
}
}).catch(({msg}) => {
@ -831,7 +831,7 @@ export default {
scrollIntoActive() {
this.$nextTick(() => {
if (this.windowLarge && this.$refs.list) {
if (this.windowLandscape && this.$refs.list) {
const active = this.$refs.list.querySelector(".active")
if (active) {
$A.scrollIntoViewIfNeeded(active);

View File

@ -4,7 +4,7 @@
<ProjectPanel/>
<ProjectDialog/>
</template>
<ProjectList v-if="windowSmall" v-show="projectId === 0"/>
<ProjectList v-if="windowPortrait" v-show="projectId === 0"/>
</div>
</template>

View File

@ -69,7 +69,7 @@
<Radio label="close">{{$L('关闭')}}</Radio>
</RadioGroup>
<div class="form-tip">{{$L('任务完成后自动归档。')}}</div>
<ETooltip v-if="formDatum.auto_archived=='open'" placement="right" :disabled="windowSmall || $isEEUiApp">
<ETooltip v-if="formDatum.auto_archived=='open'" placement="right" :disabled="$isEEUiApp || windowTouch">
<div class="setting-auto-day">
<Input v-model="formDatum.archived_day" type="number">
<span slot="append">{{$L('天')}}</span>

View File

@ -116,7 +116,7 @@ export default {
},
settingTitleName() {
if (this.windowSmall) {
if (this.windowPortrait) {
return this.titleNameRoute
}
return '设置'
@ -126,7 +126,7 @@ export default {
watch: {
routeName: {
handler(name) {
if (name === 'manage-setting' && this.windowLarge) {
if (name === 'manage-setting' && this.windowLandscape) {
this.goForward({name: 'manage-setting-personal'}, true);
}
},
@ -191,7 +191,7 @@ export default {
classNameRoute(path, divided) {
return {
"active": this.windowLarge && this.routeName === `manage-setting-${path}`,
"active": this.windowLandscape && this.routeName === `manage-setting-${path}`,
"divided": !!divided
};
},

View File

@ -43,7 +43,7 @@ export default {
return this.$route.query ? $A.runNum(this.$route.query.history_id) : 0;
},
isPreview() {
return this.windowSmall || this.code || this.historyId > 0 || (this.fileInfo && this.fileInfo.permission === 0)
return this.windowPortrait || this.code || this.historyId > 0 || (this.fileInfo && this.fileInfo.permission === 0)
},
pageName() {
let name = this.fileInfo ? this.fileInfo.name : '';

View File

@ -7,10 +7,13 @@ export default {
'windowHeight',
'windowActive',
'windowScrollY',
'windowLarge',
'windowSmall',
'windowTouch',
'windowLandscape',
'windowPortrait',
'userId',
'userToken',

View File

@ -1,22 +1,33 @@
const windowWidth = $A(window).width(),
windowHeight = $A(window).height(),
windowOrientation = $A.strExists(window.screen.orientation.type, 'portrait') ? 'portrait' : 'landscape'
export default {
// 客户端ID希望不变的除非清除浏览器缓存或者卸载应用
clientId: "",
// 是否移动端(支持触摸)
supportTouch: "ontouchend" in document,
// 浏览器尺寸信息
windowWidth: $A(window).width(),
windowHeight: $A(window).height(),
windowScrollY: 0,
// 浏览器窗口类型
windowLarge: $A(window).width() > 834, // 大窗口
windowSmall: $A(window).width() <= 834, // 小窗口
// 窗口是否激活
windowActive: true,
// 窗口滚动条位置
windowScrollY: 0,
// 浏览器支持触摸事件
windowTouch: "ontouchend" in document,
// 浏览器尺寸信息
windowWidth: windowWidth,
windowHeight: windowHeight,
// 浏览器窗口方向
windowOrientation: windowOrientation,
windowLandscape: windowOrientation === 'landscape', // 横屏
windowPortrait: windowOrientation === 'portrait', // 竖屏
// 表单布局
formLabelPosition: windowWidth > 576 ? 'right' : 'top',
formLabelWidth: windowWidth > 576 ? 'auto' : '',
// App通知权限
appNotificationPermission: true,
@ -171,10 +182,6 @@ export default {
// 工作报告未读数量
reportUnreadNumber: 0,
// 表单布局
formLabelPosition: $A(window).width() > 576 ? 'right' : 'top',
formLabelWidth: $A(window).width() > 576 ? 'auto' : '',
// 加密相关
apiKeyData: {},
localKeyPair: {},

View File

@ -13,4 +13,5 @@
@import "user-avatar";
@import "user-input";
@import "report";
@import "resize-line";
@import "right-bottom";

View File

@ -314,13 +314,13 @@
opacity: 0;
}
body.support-touch {
body.window-touch {
.mobile-back {
display: block;
}
}
@media (max-width: 834px) {
body.window-portrait {
.mobile-tabbar {
display: flex;
}

View File

@ -0,0 +1,30 @@
.component-resize-line {
cursor: col-resize;
&.resizing {
&:after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
cursor: col-resize;
}
}
&.bottom {
cursor: row-resize;
&:after {
cursor: row-resize;
}
}
}
body.window-portrait {
.component-resize-line {
display: none;
}
}

View File

@ -88,7 +88,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.common-right-bottom {
bottom: 20px;
right: auto;

View File

@ -788,7 +788,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.chat-input-box {
.chat-input-quick-emoji {
right: 10px;

View File

@ -71,12 +71,6 @@
}
}
@media (max-width: 834px) {
&:hover {
background-color: transparent;
}
}
&.no {
&:hover {
background-color: transparent;
@ -123,11 +117,6 @@
transform: translateX(50%);
transition: all 0.2s;
@media (max-width: 834px) {
opacity: 1;
transform: translateX(0);
}
&:hover {
> i {
color: $primary-text-color;
@ -150,3 +139,21 @@
}
}
}
body.window-portrait {
.dialog-group-info {
.group-info-user {
> ul {
> li {
&:hover {
background-color: transparent;
}
.user-exit {
opacity: 1;
transform: translateX(0);
}
}
}
}
}
}

View File

@ -42,12 +42,6 @@
background-color: rgba($primary-desc-color, 0.1);
}
@media (max-width: 834px) {
&:hover {
background-color: transparent;
}
}
.common-avatar {
width: 0;
flex: 1;
@ -59,3 +53,17 @@
}
}
}
body.window-portrait {
.dialog-respond {
.respond-user {
> ul {
> li {
&:hover {
background-color: transparent;
}
}
}
}
}
}

View File

@ -1602,7 +1602,7 @@
}
}
body.support-touch {
body.window-touch {
.dialog-wrapper {
.dialog-scroller {
user-select: none;
@ -1621,7 +1621,7 @@ body.support-touch {
}
}
@media (max-width: 834px) {
body.window-portrait {
.dialog-wrapper {
background-color: #f8f8f8;
&.drawer-list {
@ -1851,18 +1851,18 @@ body.support-touch {
}
}
}
}
@media (max-width: 834px) and (min-width: 390px){
.dialog-wrapper-operate {
.operate-action {
width: 376px;
}
.operate-emoji {
width: 376px;
@media (max-width: 768px) and (min-width: 390px){
.dialog-wrapper-operate {
.operate-action {
width: 376px;
}
.operate-emoji {
width: 376px;
> li {
width: 46px;
> li {
width: 46px;
}
}
}
}

View File

@ -314,16 +314,6 @@
}
}
@media (max-width: 834px) {
.file-preview {
.edit-header {
.header-hint {
display: none;
}
}
}
}
@media (max-width: 1200px) {
.file-content {
overflow: auto;
@ -343,3 +333,13 @@
}
}
}
body.window-portrait {
.file-preview {
.edit-header {
.header-hint {
display: none;
}
}
}
}

View File

@ -49,23 +49,6 @@ body {
}
}
}
@media (max-width: 834px) {
grid-template-columns: none;
grid-gap: 12px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
> li {
width: calc(50% - 6px);
max-width: 180px;
.meeting-player {
.player {
width: 100%;
height: 176px;;
}
}
}
}
}
}
}
@ -76,6 +59,37 @@ body {
}
}
}
body.window-portrait {
.ivu-modal-wrap {
&.meeting-manager {
.ivu-modal {
.ivu-modal-content {
.ivu-modal-body {
> ul {
grid-template-columns: none;
grid-gap: 12px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
> li {
width: calc(50% - 6px);
max-width: 180px;
.meeting-player {
.player {
width: 100%;
height: 176px;;
}
}
}
}
}
}
}
}
}
}
.meeting-drag-ball {
position: relative;
background-color: #ffffff;
@ -97,6 +111,7 @@ body {
padding-left: 4px;
}
}
.meeting-button-group {
display: flex;
justify-content: flex-end;

View File

@ -1026,7 +1026,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.project-panel {
.project-titbox {
position: sticky;

View File

@ -206,7 +206,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.task-add {
.task-add-form,
.task-add-advanced {

View File

@ -858,7 +858,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.task-detail {
.task-info {
.scroller {

View File

@ -191,7 +191,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.page-calendar {
.calendar-head {
.calendar-titbox {
@ -229,16 +229,17 @@
}
}
}
}
@media (max-width: 640px) {
.page-calendar {
.calendar-box {
.calendar-wrapper {
.tui-full-calendar-popup-arrow {
display: none;
@media (max-width: 640px) {
.page-calendar {
.calendar-box {
.calendar-wrapper {
.tui-full-calendar-popup-arrow {
display: none;
}
}
}
}
}
}

View File

@ -286,7 +286,7 @@
opacity: 0;
}
@media (max-width: 834px) {
body.window-portrait {
.page-dashboard {
.dashboard-wrapper {
display: block;

View File

@ -695,7 +695,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.page-file {
.file-wrapper {
.file-head {

View File

@ -198,7 +198,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.page-login {
.login-body {
padding: 0 0 110px;

View File

@ -421,7 +421,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.page-manage {
&.show-tabbar {
.manage-box-main {

View File

@ -590,7 +590,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.page-messenger {
.messenger-wrapper {
.messenger-select {

View File

@ -372,7 +372,7 @@
}
}
@media (max-width: 834px) {
body.window-portrait {
.page-setting {
.setting-head {
margin: 32px 32px 0;

View File

@ -100,7 +100,7 @@
line-height: 26px
}
@media (max-width: 834px) {
@media (max-width: 768px) {
.mirror {
width: 100%;
padding: 0 15px 10px