From 5b8d5dd97536456a9d5d1384216eac1093b2dc3d Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Tue, 11 Mar 2025 22:25:14 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=B8=80=E4=BA=9B=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/tutorial/index.vue         |  2 +-
 .../src/components/vip-button/index.vue       |  1 -
 .../src/layout/components/footer/index.vue    |  4 +-
 .../certd-client/src/layout/layout-basic.vue  |  3 ++
 .../src/router/source/modules/about.tsx       | 17 ------
 packages/ui/certd-client/src/style/certd.less |  2 +-
 .../src/vben/layout-ui/vben-layout.vue        |  2 +-
 .../views/certd/pipeline/pipeline/index.vue   | 54 +++++++++++--------
 .../src/views/certd/suite/mine/index.vue      |  2 +-
 .../views/framework/home/dashboard/index.vue  | 12 +++--
 .../framework/home/dashboard/suite-card.vue   |  2 +-
 .../src/views/sys/settings/index.vue          |  6 +--
 .../src/views/sys/settings/tabs/base.vue      | 16 ++----
 .../src/views/sys/settings/tabs/payment.vue   |  2 +-
 .../src/views/sys/settings/tabs/register.vue  |  2 +-
 .../certd-client/src/views/sys/site/index.vue | 40 +++-----------
 16 files changed, 67 insertions(+), 100 deletions(-)

diff --git a/packages/ui/certd-client/src/components/tutorial/index.vue b/packages/ui/certd-client/src/components/tutorial/index.vue
index 96d6cffb..b37e87e1 100644
--- a/packages/ui/certd-client/src/components/tutorial/index.vue
+++ b/packages/ui/certd-client/src/components/tutorial/index.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/components/vip-button/index.vue b/packages/ui/certd-client/src/components/vip-button/index.vue
index 9eccc65e..7c9b0d8e 100644
--- a/packages/ui/certd-client/src/components/vip-button/index.vue
+++ b/packages/ui/certd-client/src/components/vip-button/index.vue
@@ -382,7 +382,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
   cursor: pointer;
 
   &.isPlus {
diff --git a/packages/ui/certd-client/src/layout/components/footer/index.vue b/packages/ui/certd-client/src/layout/components/footer/index.vue
index db10c157..fec318d0 100644
--- a/packages/ui/certd-client/src/layout/components/footer/index.vue
+++ b/packages/ui/certd-client/src/layout/components/footer/index.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/layout/layout-basic.vue b/packages/ui/certd-client/src/layout/layout-basic.vue
index b9ccbad0..e663b42f 100644
--- a/packages/ui/certd-client/src/layout/layout-basic.vue
+++ b/packages/ui/certd-client/src/layout/layout-basic.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/router/source/modules/about.tsx b/packages/ui/certd-client/src/router/source/modules/about.tsx
index 9909a95b..ac462729 100644
--- a/packages/ui/certd-client/src/router/source/modules/about.tsx
+++ b/packages/ui/certd-client/src/router/source/modules/about.tsx
@@ -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() {}
-    }
   }
 ];
 
diff --git a/packages/ui/certd-client/src/style/certd.less b/packages/ui/certd-client/src/style/certd.less
index 75239446..e27936a9 100644
--- a/packages/ui/certd-client/src/style/certd.less
+++ b/packages/ui/certd-client/src/style/certd.less
@@ -76,7 +76,7 @@
 
 .fs-crud-table{
   .ant-table-body {
-    height: 1000px !important;
+    height: 60vh;
     table {
     }
   }
diff --git a/packages/ui/certd-client/src/vben/layout-ui/vben-layout.vue b/packages/ui/certd-client/src/vben/layout-ui/vben-layout.vue
index c464b738..544f1b00 100644
--- a/packages/ui/certd-client/src/vben/layout-ui/vben-layout.vue
+++ b/packages/ui/certd-client/src/vben/layout-ui/vben-layout.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
index 4b36d95d..a10966e3 100644
--- a/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
+++ b/packages/ui/certd-client/src/views/certd/pipeline/pipeline/index.vue
@@ -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;
+      }
     }
   }
 }
diff --git a/packages/ui/certd-client/src/views/certd/suite/mine/index.vue b/packages/ui/certd-client/src/views/certd/suite/mine/index.vue
index d9b86129..1f925821 100644
--- a/packages/ui/certd-client/src/views/certd/suite/mine/index.vue
+++ b/packages/ui/certd-client/src/views/certd/suite/mine/index.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue b/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
index 0f8c3163..e5b459e1 100644
--- a/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
+++ b/packages/ui/certd-client/src/views/framework/home/dashboard/index.vue
@@ -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;
     }
diff --git a/packages/ui/certd-client/src/views/framework/home/dashboard/suite-card.vue b/packages/ui/certd-client/src/views/framework/home/dashboard/suite-card.vue
index 8c00fd25..8a95d636 100644
--- a/packages/ui/certd-client/src/views/framework/home/dashboard/suite-card.vue
+++ b/packages/ui/certd-client/src/views/framework/home/dashboard/suite-card.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/views/sys/settings/index.vue b/packages/ui/certd-client/src/views/sys/settings/index.vue
index fdd3d723..66d17731 100644
--- a/packages/ui/certd-client/src/views/sys/settings/index.vue
+++ b/packages/ui/certd-client/src/views/sys/settings/index.vue
@@ -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;
diff --git a/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue b/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
index 54c3df5d..d506caf5 100644
--- a/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
+++ b/packages/ui/certd-client/src/views/sys/settings/tabs/base.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/views/sys/settings/tabs/payment.vue b/packages/ui/certd-client/src/views/sys/settings/tabs/payment.vue
index ac860e5f..0bb53320 100644
--- a/packages/ui/certd-client/src/views/sys/settings/tabs/payment.vue
+++ b/packages/ui/certd-client/src/views/sys/settings/tabs/payment.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/views/sys/settings/tabs/register.vue b/packages/ui/certd-client/src/views/sys/settings/tabs/register.vue
index 80c5a529..9fa25e2b 100644
--- a/packages/ui/certd-client/src/views/sys/settings/tabs/register.vue
+++ b/packages/ui/certd-client/src/views/sys/settings/tabs/register.vue
@@ -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>
diff --git a/packages/ui/certd-client/src/views/sys/site/index.vue b/packages/ui/certd-client/src/views/sys/site/index.vue
index 82fbfa20..1f375eb0 100644
--- a/packages/ui/certd-client/src/views/sys/site/index.vue
+++ b/packages/ui/certd-client/src/views/sys/site/index.vue
@@ -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;