perf: 一些手机端适配优化

pull/361/head
xiaojunnuo 2025-03-11 22:25:14 +08:00
parent e36aa065e9
commit 5b8d5dd975
16 changed files with 67 additions and 100 deletions

View File

@ -16,7 +16,7 @@ const slots = defineSlots();
<template>
<div class="tutorial-button pointer" @click="open">
<template v-if="!slots.default">
<fs-icon v-if="showIcon" icon="ant-design:question-circle-outlined"></fs-icon>
<fs-icon v-if="showIcon === false" icon="ant-design:question-circle-outlined" class="mr-0.5"></fs-icon>
<div class="hidden md:block">使用教程</div>
</template>
<slot></slot>

View File

@ -382,7 +382,6 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
cursor: pointer;
&.isPlus {

View File

@ -4,15 +4,15 @@
<span v-if="!settingStore.isComm">
<span>Powered by</span>
<a> handsfree.work </a>
<a-divider type="vertical" />
</span>
<template v-if="siteInfo.licenseTo">
<a-divider type="vertical" />
<a :href="siteInfo.licenseToUrl || ''">{{ siteInfo.licenseTo }}</a>
<a-divider type="vertical" />
</template>
<template v-if="sysPublic.icpNo">
<a-divider type="vertical" />
<span>
<a href="https://beian.miit.gov.cn/" target="_blank">{{ sysPublic.icpNo }}</a>
</span>

View File

@ -63,6 +63,9 @@ onMounted(async () => {
<LockScreen :avatar @to-login="handleLogout" />
</template>
<template #header-right-0>
<div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full hidden md:block">
<tutorial-button v-if="!settingStore.isComm" class="flex-center header-btn" />
</div>
<div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
<vip-button class="flex-center header-btn" mode="nav" />
</div>

View File

@ -18,23 +18,6 @@ export const aboutResource = [
return !settingStore.isComm;
}
}
},
{
title: "教程",
name: "help",
path: "/help",
meta: {
icon: "lucide:copyright",
order: 9999,
show: () => {
const settingStore = useSettingStore();
return !settingStore.isComm;
},
slot() {
return <TutorialButton className="flex-center" show-icon={false} />;
},
click() {}
}
}
];

View File

@ -76,7 +76,7 @@
.fs-crud-table{
.ant-table-body {
height: 1000px !important;
height: 60vh;
table {
}
}

View File

@ -488,7 +488,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
</template>
</LayoutContent>
<LayoutFooter v-if="footerEnable" :fixed="footerFixed" :height="footerHeight" :show="!isFullContent" :width="footerWidth" :z-index="zIndex">
<LayoutFooter v-if="footerEnable" class="hidden md:block" :fixed="footerFixed" :height="footerHeight" :show="!isFullContent" :width="footerWidth" :z-index="zIndex">
<slot name="footer"></slot>
</LayoutFooter>
</div>

View File

@ -221,12 +221,12 @@
</div>
</div>
<div class="layout-right">
<a-page-header title="运行历史" sub-title="" class="logs-block" :class="{ collapse: logsCollapse }" :ghost="false">
<div class="collapse-toggle" @click="toggleLogsCollapse">
1111
<fs-icon icon="ion:search"></fs-icon>
</div>
<div class="layout-right transition-all duration-300" :class="{ collapsed: logsCollapse }">
<div class="collapse-toggle bg-white dark:bg-black" @click="toggleLogsCollapse">
<fs-icon v-if="logsCollapse" icon="ion:chevron-back-outline"></fs-icon>
<fs-icon v-else icon="ion:chevron-forward-outline"></fs-icon>
</div>
<a-page-header title="运行历史" sub-title="" class="logs-block" :ghost="false">
<a-timeline class="mt-10">
<template v-for="item of histories" :key="item.id">
<pi-history-timeline-item
@ -796,6 +796,9 @@ export default defineComponent({
.page-pipeline-edit {
.fs-page-header {
.title {
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
display: flex;
.back {
margin-right: 10px;
@ -817,6 +820,7 @@ export default defineComponent({
height: 100%;
position: relative;
display: flex;
overflow-x: hidden;
.layout-left {
flex: 1;
height: 100%;
@ -1015,30 +1019,38 @@ export default defineComponent({
}
}
.logs-block {
height: 100%;
overflow-y: auto;
max-width: 90vw;
.ant-page-header-content {
position: relative;
}
&.collapse{
.layout-right {
position: "relative";
&.collapsed {
margin-right: -350px;
}
.collapse-toggle {
position: absolute;
right: 10px;
margin-left: -30px;
top: 10px;
cursor: pointer;
font-size: 20px;
color: #1890ff;
width: 80px;
height: 80px;
border: 1px solid #1890ff;
width: 30px;
height: 30px;
border: 1px solid #eee;
border-right: 0;
z-index: 10000;
border-radius: 5px 0 0 5px;
display: flex;
justify-content: center;
align-items: center;
}
.logs-block {
height: 100%;
overflow-y: auto;
max-width: 90vw;
.ant-page-header-content {
position: relative;
}
}
}
}

View File

@ -4,7 +4,7 @@
<div class="title flex-baseline">
我的套餐
<div class="sub">
<div class="flex-o">当前套餐<suite-card></suite-card></div>
<div class="flex-o flex-wrap">当前套餐<suite-card></suite-card></div>
</div>
</div>
</template>

View File

@ -13,12 +13,12 @@
<div>
<span>您好{{ userInfo.nickName || userInfo.username }} 欢迎使用 {{ siteInfo.title }}</span>
</div>
<div class="flex-o">
<a-tag color="green" class="flex-inline pointer m-0"> <fs-icon icon="ion:time-outline"></fs-icon> {{ now }}</a-tag>
<div class="flex-o flex-wrap profile-badges">
<a-tag color="green" class="flex-inline pointer"> <fs-icon icon="ion:time-outline"></fs-icon> {{ now }}</a-tag>
<template v-if="userStore.isAdmin">
<a-divider type="vertical" />
<a-badge :dot="hasNewVersion">
<a-tag color="blue" class="flex-inline pointer m-0" :title="'最新版本:' + latestVersion" @click="openUpgradeUrl()">
<a-tag color="blue" class="flex-inline pointer mr-0" :title="'最新版本:' + latestVersion" @click="openUpgradeUrl()">
<fs-icon icon="ion:rocket-outline" class="mr-5"></fs-icon>
v{{ version }}
</a-tag>
@ -245,6 +245,12 @@ function openUpgradeUrl() {
align-items: center;
padding: 20px;
.profile-badges {
> * {
margin: 4px;
}
}
.avatar {
margin-right: 10px;
}

View File

@ -1,6 +1,6 @@
<template>
<div v-if="detail.enabled" class="my-suite-card">
<div class="flex-o">
<div class="flex-o flex-wrap">
<a-popover>
<template #content>
<div>

View File

@ -3,7 +3,7 @@
<!-- <template #header>-->
<!-- <div class="title">系统设置</div>-->
<!-- </template>-->
<div class="sys-settings-body">
<div class="sys-settings-body md:p-5">
<a-tabs :active-key="activeKey" type="card" class="sys-settings-tabs" @update:active-key="onChange">
<a-tab-pane key="" tab="基本设置">
<SettingBase v-if="activeKey === ''" />
@ -53,13 +53,13 @@ function onChange(value: string) {
.page-sys-settings {
.sys-settings-form {
width: 500px;
margin: 20px;
max-width: 100%;
padding: 20px;
}
.sys-settings-body {
height: 100%;
padding-top: 20px;
padding-left: 20px;
.sys-settings-tabs {
height: 100%;
display: flex;

View File

@ -1,14 +1,6 @@
<template>
<div class="sys-settings-form sys-settings-base">
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finish-failed="onFinishFailed"
>
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finish-failed="onFinishFailed">
<a-form-item label="ICP备案号" :name="['public', 'icpNo']">
<a-input v-model:value="formState.public.icpNo" placeholder="粤ICP备xxxxxxx号" />
</a-form-item>
@ -41,12 +33,10 @@
<a-form-item label="启用公共CNAME服务" :name="['private', 'commonCnameEnabled']">
<a-switch v-model:checked="formState.private.commonCnameEnabled" />
<div class="helper">
是否可以使用公共CNAME服务如果禁用且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>使CNAME
</div>
<div class="helper">是否可以使用公共CNAME服务如果禁用且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>使CNAME</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-form-item label=" " :colon="false" :wrapper-col="{ span: 8 }">
<a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>

View File

@ -28,7 +28,7 @@
<div class="helper">需要开通Native支付 <a href="https://certd.docmirror.cn/comm/payments/wxpay.html">微信配置帮助文档</a></div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
<loading-button type="primary" html-type="button" :click="onClick">保存</loading-button>
</a-form-item>
</a-form>

View File

@ -50,7 +50,7 @@
</template>
</template>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-form-item label=" " :colon="false" :wrapper-col="{ span: 16 }">
<a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>

View File

@ -1,18 +1,10 @@
<template>
<fs-page class="page-sys-site">
<fs-page class="page-sys-settings page-sys-site">
<template #header>
<div class="title">站点个性化设置</div>
</template>
<div class="sys-site-form">
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finish-failed="onFinishFailed"
>
<div class="sys-settings-form">
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finish-failed="onFinishFailed">
<a-form-item label="站点名称" name="title">
<a-input v-model:value="formState.title" />
</a-form-item>
@ -20,22 +12,10 @@
<a-input v-model:value="formState.slogan" />
</a-form-item>
<a-form-item label="Logo" name="logo">
<fs-cropper-uploader
v-model:model-value="formState.logo"
:cropper="cropperOptions"
value-type="key"
:uploader="uploaderConfig"
:build-url="buildUrl"
/>
<fs-cropper-uploader v-model:model-value="formState.logo" :cropper="cropperOptions" value-type="key" :uploader="uploaderConfig" :build-url="buildUrl" />
</a-form-item>
<a-form-item label="登录页Logo" name="loginLogo">
<fs-cropper-uploader
v-model:model-value="formState.loginLogo"
:cropper="loginLogoCropperOptions"
value-type="key"
:uploader="uploaderConfig"
:build-url="buildUrl"
/>
<fs-cropper-uploader v-model:model-value="formState.loginLogo" :cropper="loginLogoCropperOptions" value-type="key" :uploader="uploaderConfig" :build-url="buildUrl" />
</a-form-item>
<a-form-item label="你的主体名称" name="licenseTo">
<a-input v-model:value="formState.licenseTo" />
@ -44,7 +24,7 @@
<a-form-item label="你的主体URL" name="licenseToUrl">
<a-input v-model:value="formState.licenseToUrl" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-form-item label=" " :colon="false" :wrapper-col="{ span: 8 }">
<a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>
@ -122,7 +102,7 @@ function buildUrl(key: string) {
return `/api/basic/file/download?&key=` + key;
}
function onFinishFailed(err) {
function onFinishFailed(err: any) {
console.log(err);
}
@ -139,12 +119,6 @@ const loginLogoCropperOptions = ref({
</script>
<style lang="less">
.page-sys-site {
.sys-site-form {
width: 500px;
margin: 20px;
}
}
.fs-cropper-dialog__preview img {
border-radius: 0 !important;
margin-top: 0 !important;