应用

src/components/czr-ui/CzrMarkdown/CzrMarkdown.vue

@@ -164,11 +164,11 @@ const Menus: any = [
 watch(
   () => props.modelValue,
   (n) => {
-    markdownValue.value = n
+    markdownValue.value = n || ''
   },
 )
 const ref_textarea = ref(null)
-const markdownValue = ref(props.modelValue)
+const markdownValue = ref(props.modelValue || '')
 
 const markdownHtmlCpt = computed(() => {
   return DOMPurify.sanitize(marked(markdownValue.value) as any)

src/components/czr-ui/czr-form-link/markdown.vue

@@ -1,7 +1,9 @@
 <template>
   <div :style="{ height: height }">
-    {{ state.paramVal }}
-    <CzrMarkdown v-model="state.paramVal" />
+    <CzrMarkdown
+      v-model="state.paramVal"
+      :view="$attrs.view || state.formView"
+    />
   </div>
 </template>
 

src/views/manage/center/square/app-detail.vue

@@ -8,6 +8,7 @@
     height="auto"
     max-height="90%"
     :loading="state.loading"
+    :show-submit="!isViewCpt"
   >
     <div class="bm-form">
       <div class="mb-4 flex gap-4">
@@ -69,6 +70,12 @@
         <CzrFormColumn
           required
           :span="24"
+          label="应用创建单位"
+          v-model:param="state.form.createDept"
+        />
+        <CzrFormColumn
+          required
+          :span="24"
           label="应用介绍"
           v-model:param="state.form.introduction"
           link="markdown"

src/views/manage/center/square/model-detail.vue

@@ -8,12 +8,13 @@
     height="auto"
     max-height="90%"
     :loading="state.loading"
+    :show-submit="!isViewCpt"
   >
     <div class="bm-form">
       <CzrForm ref="ref_form" :form-view="isViewCpt">
         <CzrFormColumn
           required
-          :span="12"
+          :span="8"
           label="模型类型"
           v-model:param="state.form.type"
           link="select"
@@ -23,7 +24,7 @@
         <template v-if="state.form.type">
           <CzrFormColumn
             required
-            :span="12"
+            :span="8"
             label="模型供应商"
             v-model:param="state.form.manufacturer"
             link="select"
@@ -36,7 +37,7 @@
           />
           <template v-if="state.form.manufacturer">
             <CzrFormColumn
-              :span="24"
+              :span="8"
               label="版本"
               v-model:param="state.form.version"
               :disabled="true"
@@ -50,8 +51,16 @@
             <CzrFormColumn
               required
               :span="24"
-              label="模型介绍"
+              label="模型简介"
               v-model:param="state.form.synopsis"
+              type="textarea"
+              :rows="4"
+            />
+            <CzrFormColumn
+              required
+              :span="24"
+              label="详细介绍"
+              v-model:param="state.form.overview"
               link="markdown"
               height="400px"
             />
@@ -196,6 +205,7 @@ const getModelProvide = (obj) => {
   state.form.name = obj.name
   state.form.version = obj.version
   state.form.synopsis = obj.description
+  state.form.overview = obj.description
 }
 </script>
 

src/views/manage/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="_main size-full overflow-y-auto">
+  <div class="_main size-full overflow-y-auto" ref="ref_main">
     <div
       class="flex h-[21.88rem] w-full rounded-lg bg-[url('@/assets/images/home/head.png')] bg-[length:auto_100%] bg-center bg-no-repeat"
     >
@@ -24,216 +24,274 @@
       </div>
     </div>
     <div
-      class="mt-2 flex w-full flex-col items-center rounded-lg bg-[#ffffff] py-8"
+      class="relative mt-2 flex w-full flex-col items-center rounded-lg bg-[#ffffff] py-8"
     >
-      <div style="font-family: Alimama" class="mt-10 text-4xl">
-        <span style="font-family: Alimama" class="text-[#2F82FF]"
-          >热门应用</span
+      <template v-if="state.hot.more">
+        <div
+          class="__hover absolute top-9 left-25 my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+          @click="onBackHot"
         >
-        当下最火 AI 实用场景集合
-      </div>
-      <div class="mt-6 text-lg text-[#303133]">
-        覆盖生活办公全需求，让前沿技术即刻落地你的日常
-      </div>
-      <div class="mt-10 flex gap-4.5" v-loading="state.hot.loading">
-        <template v-for="item in state.hot.data">
-          <div
-            class="flex h-[20.5rem] w-[17.8rem] flex-col rounded-lg bg-linear-to-br bg-[url('@/assets/images/home/hot-bg.png')] from-[#F3FAFF] to-[#ffffff] bg-[length:100%_100%] bg-no-repeat px-7 py-8"
+          <span class="mr-1 mb-1"><</span>返回
+        </div>
+      </template>
+      <template v-if="state.app.more">
+        <div
+          class="__hover absolute top-9 left-25 my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+          @click="onBackApp"
+        >
+          <span class="mr-1 mb-1"><</span>返回
+        </div>
+      </template>
+      <template v-if="state.model.more">
+        <div
+          class="__hover absolute top-9 left-25 my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+          @click="onBackModel"
+        >
+          <span class="mr-1 mb-1"><</span>返回
+        </div>
+      </template>
+      <template v-if="!(state.app.more || state.model.more)">
+        <div style="font-family: Alimama" class="mt-10 text-4xl">
+          <span style="font-family: Alimama" class="text-[#2F82FF]"
+            >热门应用</span
           >
-            <img
-              src="@/assets/images/app/app-default-logo.png"
-              class="size-13"
-            />
-            <div class="mt-2 flex justify-between">
-              <div class="text-lg font-bold" v-title>
-                智慧口岸智能咨询智慧口岸智能咨询智慧口岸智能咨询
-              </div>
-              <div
-                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
-              >
-                <SvgIcon name="hot" color="#ffffff" size="12" /> 0
-              </div>
-            </div>
-            <div class="mt-2 text-xs" v-title>
-              太极计算机股份有限公司太极计算机股份有限公司太极计算机股份有限公司
-            </div>
+          当下最火 AI 实用场景集合
+        </div>
+        <div class="mt-6 text-lg text-[#303133]">
+          覆盖生活办公全需求，让前沿技术即刻落地你的日常
+        </div>
+        <div
+          class="mt-10 gap-4.5"
+          :class="state.hot.more ? 'grid grid-cols-5' : 'flex'"
+          v-loading="state.hot.loading"
+        >
+          <template v-for="item in state.hot.data">
             <div
-              class="mt-4 text-xs"
-              v-title="{ lines: 5 }"
-              style="line-height: 1.1rem"
+              class="flex h-[20.5rem] w-[17.8rem] flex-col rounded-lg bg-linear-to-br bg-[url('@/assets/images/home/hot-bg.png')] from-[#F3FAFF] to-[#ffffff] bg-[length:100%_100%] bg-no-repeat px-7 py-8"
             >
-              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
-              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
-            </div>
-            <div class="mt-auto flex items-center gap-4">
-              <div class="grid flex-1 grid-cols-2 gap-4">
-                <div
-                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm bg-linear-to-br from-[#1B69FE] to-[#719CF4] text-xs text-[#ffffff]"
-                  @click="
-                    $router.push({
-                      name: 'd8b2a8e5-d087-4722-b833-7b7e10df0ec0',
-                      params: { id: 123 },
-                    })
-                  "
-                >
-                  立即体验
+              <img
+                src="@/assets/images/app/app-default-logo.png"
+                class="size-13"
+              />
+              <div class="mt-2 flex justify-between">
+                <div class="text-lg font-bold" v-title>
+                  {{ item.name }}
                 </div>
                 <div
-                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm border-1 border-[#2F82FF] text-xs text-[#2F82FF]"
-                  @click="
-                    $router.push({
-                      name: '083e7fdd-d7e6-4712-84fa-865e12458de2',
-                      params: { id: 123 },
-                    })
-                  "
+                  class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
                 >
-                  了解详情
+                  <SvgIcon name="hot" color="#ffffff" size="12" /> 0
                 </div>
               </div>
-              <el-tooltip placement="top" content="收藏">
-                <SvgIcon name="star" class="__hover" />
-              </el-tooltip>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div
-        class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
-      >
-        查看更多<span class="mb-1 ml-1">></span>
-      </div>
-      <div style="font-family: Alimama" class="mt-10 text-4xl">
-        <span style="font-family: Alimama" class="text-[#2F82FF]"
-          >部门应用</span
-        >
-        企业全部门场景化 AI 解决方案库
-      </div>
-      <div class="mt-6 text-lg text-[#303133]">
-        针对职能痛点定制能力，让每个岗位都能高效借力智能工具
-      </div>
-      <div class="mt-10 flex gap-4.5" v-loading="state.app.loading">
-        <template v-for="item in state.app.data">
-          <div
-            class="relative flex h-[27.25rem] w-[18rem] flex-col overflow-hidden rounded-lg bg-[url('@/assets/images/home/app-bg.png')] bg-[length:100%_100%] bg-no-repeat px-7 py-8"
-          >
-            <div class="mt-2 flex justify-between">
-              <div class="text-lg font-bold" v-title>咨询智能问数</div>
+              <div class="mt-2 text-xs" v-title>
+                {{ item.createDept }}
+              </div>
               <div
-                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
+                class="mt-4 text-xs"
+                v-title="{ lines: 5 }"
+                style="line-height: 1.1rem"
               >
-                <SvgIcon name="hot" color="#ffffff" size="12" /> 0
+                关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
+                关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
               </div>
-            </div>
-            <div class="mt-2 text-xs" v-title>太极计算机股份有限公司</div>
-            <div
-              class="mt-4 text-xs"
-              v-title="{ lines: 5 }"
-              style="line-height: 1.1rem"
-            >
-              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
-            </div>
-            <div
-              class="absolute bottom-50 z-1 flex w-full items-center gap-4 pr-14"
-            >
-              <div class="grid flex-1 grid-cols-2 gap-4">
-                <div
-                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm bg-linear-to-br from-[#1B69FE] to-[#719CF4] text-xs text-[#ffffff]"
-                  @click="
-                    $router.push({
-                      name: 'd8b2a8e5-d087-4722-b833-7b7e10df0ec0',
-                      params: { id: 123 },
-                    })
-                  "
-                >
-                  立即体验
+              <div class="mt-auto flex items-center gap-4">
+                <div class="grid flex-1 grid-cols-2 gap-4">
+                  <div
+                    class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm bg-linear-to-br from-[#1B69FE] to-[#719CF4] text-xs text-[#ffffff]"
+                    @click="
+                      $router.push({
+                        name: 'd8b2a8e5-d087-4722-b833-7b7e10df0ec0',
+                        params: { id: 123 },
+                      })
+                    "
+                  >
+                    立即体验
+                  </div>
+                  <div
+                    class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm border-1 border-[#2F82FF] text-xs text-[#2F82FF]"
+                    @click="
+                      $router.push({
+                        name: '083e7fdd-d7e6-4712-84fa-865e12458de2',
+                        params: { id: 123 },
+                      })
+                    "
+                  >
+                    了解详情
+                  </div>
                 </div>
+                <el-tooltip placement="top" content="收藏">
+                  <SvgIcon name="star" class="__hover" />
+                </el-tooltip>
               </div>
-              <el-tooltip placement="top" content="收藏">
-                <SvgIcon name="star" class="__hover" />
-              </el-tooltip>
             </div>
-            <img
-              src="@/assets/images/home/app-bg-icon.png"
-              class="absolute bottom-0 left-0 z-0 w-full"
-            />
-          </div>
-        </template>
-      </div>
-      <div
-        class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
-        @click="$router.push({ name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe' })"
-      >
-        查看更多<span class="mb-1 ml-1">></span>
-      </div>
-      <div style="font-family: Alimama" class="mt-10 text-4xl">
-        <span style="font-family: Alimama" class="text-[#2F82FF]">
-          模型广场
-        </span>
-        海量优质 AI 模型资源聚合平台
-      </div>
-      <div class="mt-6 text-lg text-[#303133]">
-        从通用基础到垂直专精，一站式匹配你的创新开发与场景落地需求
-      </div>
-      <div class="mt-32 flex gap-4.5" v-loading="state.model.loading">
-        <template v-for="item in state.model.data">
-          <div
-            class="relative flex h-[16.25rem] w-[18rem] flex-col rounded-lg bg-[url('@/assets/images/home/model-bg.png')] bg-[length:100%_100%] bg-no-repeat p-7"
+          </template>
+        </div>
+        <div
+          v-if="!state.hot.more && state.hot.total > 4"
+          class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+          @click="onMoreHot"
+        >
+          查看更多<span class="mb-1 ml-1">></span>
+        </div>
+      </template>
+      <template v-if="!(state.hot.more || state.model.more)">
+        <div style="font-family: Alimama" class="mt-10 text-4xl">
+          <span style="font-family: Alimama" class="text-[#2F82FF]"
+            >部门应用</span
           >
-            <img
-              src="@/assets/images/home/mode-bg-icon.png"
-              class="absolute -top-18 left-20 z-1 h-[7.75rem] w-[8.5rem]"
-            />
-            <div class="mt-7 text-lg font-bold" v-title>咨询智能问数</div>
-            <div class="mt-2 flex items-center justify-between">
-              <div class="flex-1 text-xs" v-title>
-                太极计算机股份有限公司太极计算机股份有限公司
+          企业全部门场景化 AI 解决方案库
+        </div>
+        <div class="mt-6 text-lg text-[#303133]">
+          针对职能痛点定制能力，让每个岗位都能高效借力智能工具
+        </div>
+        <div
+          class="mt-10 gap-4.5"
+          :class="state.app.more ? 'grid grid-cols-5' : 'flex'"
+          v-loading="state.app.loading"
+        >
+          <template v-for="item in state.app.data">
+            <div
+              class="relative flex h-[27.25rem] w-[18rem] flex-col overflow-hidden rounded-lg bg-[url('@/assets/images/home/app-bg.png')] bg-[length:100%_100%] bg-no-repeat px-7 py-8"
+            >
+              <div class="mt-2 flex justify-between">
+                <div class="text-lg font-bold" v-title>{{ item.name }}</div>
+                <!--              <div-->
+                <!--                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"-->
+                <!--              >-->
+                <!--                <SvgIcon name="hot" color="#ffffff" size="12" /> 0-->
+                <!--              </div>-->
+              </div>
+              <div class="mt-2 text-xs" v-title>{{ item.userNickName }}</div>
+              <div
+                class="mt-4 text-xs"
+                v-title="{ lines: 5 }"
+                style="line-height: 1.1rem"
+              >
+                {{ item.description }}
               </div>
               <div
-                class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
+                class="absolute bottom-50 z-1 flex w-full items-center gap-4 pr-14"
               >
-                <SvgIcon name="hot" color="#ffffff" size="12" /> 大模型语言
+                <div class="grid flex-1 grid-cols-2 gap-4">
+                  <div
+                    class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm bg-linear-to-br from-[#1B69FE] to-[#719CF4] text-xs text-[#ffffff]"
+                    @click="
+                      $router.push({
+                        name: 'd8b2a8e5-d087-4722-b833-7b7e10df0ec0',
+                        params: { id: item.id },
+                      })
+                    "
+                  >
+                    立即体验
+                  </div>
+                </div>
+                <!--              <el-tooltip placement="top" content="收藏">-->
+                <!--                <SvgIcon name="star" class="__hover" />-->
+                <!--              </el-tooltip>-->
               </div>
+              <img
+                src="@/assets/images/home/app-bg-icon.png"
+                class="absolute bottom-0 left-0 z-0 w-full"
+              />
             </div>
+          </template>
+        </div>
+        <div
+          v-if="!state.app.more && state.app.total > 4"
+          class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+          @click="onMoreApp"
+        >
+          查看更多<span class="mb-1 ml-1">></span>
+        </div>
+      </template>
+      <template v-if="!(state.hot.more || state.app.more)">
+        <div style="font-family: Alimama" class="mt-10 text-4xl">
+          <span style="font-family: Alimama" class="text-[#2F82FF]">
+            模型广场
+          </span>
+          海量优质 AI 模型资源聚合平台
+        </div>
+        <div class="mt-6 text-lg text-[#303133]">
+          从通用基础到垂直专精，一站式匹配你的创新开发与场景落地需求
+        </div>
+        <div
+          class="mt-32 gap-4.5"
+          :class="state.model.more ? 'grid grid-cols-5' : 'flex'"
+          v-loading="state.model.loading"
+        >
+          <template v-for="item in state.model.data">
             <div
-              class="mt-4 text-xs"
-              v-title="{ lines: 4 }"
-              style="line-height: 1.1rem"
+              class="relative flex h-[16.25rem] w-[18rem] flex-col rounded-lg bg-[url('@/assets/images/home/model-bg.png')] bg-[length:100%_100%] bg-no-repeat p-7"
             >
-              关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
-            </div>
-            <div class="mt-auto flex w-full items-center gap-4">
-              <div class="grid flex-1 grid-cols-2 gap-4">
+              <img
+                src="@/assets/images/home/mode-bg-icon.png"
+                class="absolute -top-18 left-20 z-1 h-[7.75rem] w-[8.5rem]"
+              />
+              <div class="mt-7 text-lg font-bold" v-title>咨询智能问数</div>
+              <div class="mt-2 flex items-center justify-between">
+                <div class="flex-1 text-xs" v-title>
+                  太极计算机股份有限公司太极计算机股份有限公司
+                </div>
                 <div
-                  class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm border-1 border-[#2F82FF] text-xs text-[#2F82FF]"
-                  @click="
-                    $router.push({
-                      name: '43a2845a-c322-4c49-86c5-867c1e466b7f',
-                      params: { id: 123 },
-                    })
-                  "
+                  class="flex items-center gap-0.5 rounded-xs bg-linear-to-br from-[#FF9E2D] to-[#FFB92D] p-1 text-xs text-[#ffffff]"
                 >
-                  了解详情
+                  <SvgIcon name="hot" color="#ffffff" size="12" /> 大模型语言
+                </div>
+              </div>
+              <div
+                class="mt-4 text-xs"
+                v-title="{ lines: 4 }"
+                style="line-height: 1.1rem"
+              >
+                关税税率查询、通关流程指引、特殊物品监管要求，还是跨境物流方案建议，系统都能通过自然语言交互快速响应，精准解答各类业务疑问。
+              </div>
+              <div class="mt-auto flex w-full items-center gap-4">
+                <div class="grid flex-1 grid-cols-2 gap-4">
+                  <div
+                    class="__hover col-span-1 flex h-7 items-center justify-center rounded-sm border-1 border-[#2F82FF] text-xs text-[#2F82FF]"
+                    @click="
+                      $router.push({
+                        name: '43a2845a-c322-4c49-86c5-867c1e466b7f',
+                        params: { id: 123 },
+                      })
+                    "
+                  >
+                    了解详情
+                  </div>
                 </div>
+                <el-tooltip placement="top" content="收藏">
+                  <SvgIcon name="star" class="__hover" />
+                </el-tooltip>
               </div>
-              <el-tooltip placement="top" content="收藏">
-                <SvgIcon name="star" class="__hover" />
-              </el-tooltip>
             </div>
-          </div>
-        </template>
-      </div>
-      <div
-        class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
-        @click="$router.push({ name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe' })"
-      >
-        查看更多<span class="mb-1 ml-1">></span>
-      </div>
+          </template>
+        </div>
+        <div
+          v-if="!state.model.more && state.model.total > 4"
+          class="__hover my-8 flex h-11 w-53 items-center justify-center rounded-lg bg-linear-to-r from-[#3DC8FE] to-[#6255F6] text-lg font-bold text-[#ffffff]"
+          @click="onMoreModel"
+        >
+          查看更多<span class="mb-1 ml-1">></span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import { appSearch } from '@/api/modules/app'
+import {
+  appManageGetAppManageByPage,
+  modelManageGetModelManageByPage,
+} from '@/api/modules/center/square'
 
 const emit = defineEmits([])
 const props = defineProps({})
@@ -241,35 +299,106 @@ const { proxy }: any = getCurrentInstance()
 const state: any = reactive({
   hot: {
     loading: false,
-    data: [{}, {}, {}, {}],
+    more: false,
+    data: [],
+    total: 0,
   },
   app: {
     loading: false,
-    data: [{}, {}, {}, {}],
+    more: false,
+    data: [],
+    total: 0,
   },
   model: {
     loading: false,
-    data: [{}, {}, {}],
+    more: false,
+    data: [],
+    total: 0,
   },
 })
+const ref_main = ref()
 const titleCpt = computed(() => import.meta.env.VITE_TITLE)
-const initHot = () => {}
-const initModel = () => {}
-const initApp = () => {
-  // state.app.loading = true
-  // appSearch({
-  //   page: 1,
-  //   size: 4,
-  //   // status: 1
-  // })
-  //   .then(({ data }: any) => {
-  //     state.app.data = data.records
-  //   })
-  //   .catch(() => {})
-  //   .finally(() => {
-  //     state.app.loading = false
-  //   })
+const initHot = (size = 4) => {
+  state.hot.loading = true
+  appManageGetAppManageByPage({
+    page: 1,
+    size,
+    state: 1,
+  })
+    .then(({ data }: any) => {
+      state.hot.total = data.totalElements
+      state.hot.data = data.content
+    })
+    .catch(() => {})
+    .finally(() => {
+      state.hot.loading = false
+    })
+}
+const initModel = (size = 4) => {
+  state.model.loading = true
+  modelManageGetModelManageByPage({
+    page: 1,
+    size,
+    state: 1,
+  })
+    .then(({ data }: any) => {
+      state.model.total = data.totalElements
+      state.model.data = data.content
+    })
+    .catch(() => {})
+    .finally(() => {
+      state.model.loading = false
+    })
+}
+const initApp = (size = 4) => {
+  state.app.loading = true
+  appSearch({
+    page: 1,
+    size,
+    status: 1,
+  })
+    .then(({ data }: any) => {
+      state.app.data = data.records
+      state.app.total = data.total
+    })
+    .catch(() => {})
+    .finally(() => {
+      state.app.loading = false
+    })
+}
+const onMoreHot = async () => {
+  await initHot(100000)
+  state.hot.more = true
+}
+const onBackHot = async () => {
+  state.hot.more = false
+  state.hot.data = state.hot.data.slice(0, 4)
 }
+const onMoreApp = async () => {
+  await initApp(100000)
+  state.app.more = true
+}
+const onBackApp = async () => {
+  state.app.more = false
+  state.app.data = state.app.data.slice(0, 4)
+}
+const onMoreModel = async () => {
+  await initModel(100000)
+  state.model.more = true
+}
+const onBackModel = async () => {
+  state.model.more = false
+  state.model.data = state.model.data.slice(0, 4)
+}
+watch(
+  () => [state.hot.more, state.app.more, state.model.more],
+  () => {
+    ref_main.value.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  },
+)
 onMounted(() => {
   initHot()
   initModel()