Feat: quick install

2024-11-27 06:59:54 +08:00 · 2024-03-05 17:54:57 +08:00 · 2024-03-05 17:54:57 +08:00 · 96b54d71be
commit 96b54d71be
parent 3864ea1c8e
9 changed files with 102 additions and 47 deletions
--- a/.gitignore
+++ b/.gitignore
@ -27,6 +27,7 @@ pids
 *.pid
 *.seed
 *.pid.lock
+mcsmanager_packages.json

 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
--- a/frontend/src/assets/tools.scss
+++ b/frontend/src/assets/tools.scss
@ -218,6 +218,12 @@
  overflow-x: hidden;
 }

+.ellipsis-text {
+  white-space: nowrap; 
+  overflow: hidden; 
+  text-overflow: ellipsis; 
+}
+
@mixin generate-styles($depth) {
  .m-#{$depth} {
    margin: #{$depth}px !important;
--- a/frontend/src/services/apis/instance.ts
+++ b/frontend/src/services/apis/instance.ts
@ -4,7 +4,8 @@ import type {
  NewInstanceForm,
  QuickStartTemplate,
  Schedule,
-  NewScheduleTask
+  NewScheduleTask,
+  LabelValueOption
 } from "@/types";
 import type { IGlobalInstanceConfig } from "../../../../common/global";

@ -227,7 +228,13 @@ export const createInstance = useDefineApi<
  url: "/api/instance"
 });

-export const quickInstallListAddr = useDefineApi<any, QuickStartTemplate[]>({
+export const quickInstallListAddr = useDefineApi<
+  any,
+  {
+    languages: LabelValueOption[];
+    packages: QuickStartTemplate[];
+  }
+>({
  url: "/api/instance/quick_install_list",
  method: "GET"
 });
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@ -190,13 +190,20 @@ export interface NewInstanceForm {
 }

 export interface QuickStartTemplate {
-  info: string;
-  mc: string;
-  java: string;
-  size: number;
+  language: string;
+  description: string;
+  title: string;
+  runtime: string;
+  size: string;
+  hardware: string;
  remark: string;
-  author: string;
  targetLink: string;
+  author: string;
+}
+
+export interface LabelValueOption {
+  label: string;
+  value: string;
 }

 export interface MountComponent {
--- a/frontend/src/widgets/InstanceList.vue
+++ b/frontend/src/widgets/InstanceList.vue
@ -430,7 +430,14 @@ onMounted(async () => {
        <Loading></Loading>
      </template>
      <template v-else-if="instancesMoreInfo.length > 0">
-        <a-col v-for="item in instancesMoreInfo" :key="item.instanceUuid" :span="24" :md="6">
+        <a-col
+          v-for="item in instancesMoreInfo"
+          :key="item.instanceUuid"
+          :span="24"
+          :xl="6"
+          :lg="8"
+          :sm="12"
+        >
          <CardPanel
            class="instance-card"
            :class="{ selected: multipleMode && findInstance(item) }"
--- a/frontend/src/widgets/setupApp/McPreset.vue
+++ b/frontend/src/widgets/setupApp/McPreset.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
-import { t } from "@/lang/i18n";
+import { ref, onMounted, reactive, computed } from "vue";
+import { getCurrentLang, t } from "@/lang/i18n";
 import type { LayoutCard } from "@/types/index";
 import { DownloadOutlined } from "@ant-design/icons-vue";
 import { quickInstallListAddr, createAsyncTask, queryAsyncTask } from "@/services/apis/instance";
@ -24,11 +24,18 @@ const dialog = reactive({
 });

 const {
-  state: appList,
+  state: presetList,
  execute: getQuickInstallListAddr,
  isLoading: appListLoading
 } = quickInstallListAddr();

+const appList = computed(() => {
+  let list = presetList.value?.packages || [];
+  if (searchForm.language) list = list.filter((item) => item.language === searchForm.language);
+  return list;
+});
+const appLangList = computed(() => presetList.value?.languages || []);
+
 const init = async () => {
  try {
    await getQuickInstallListAddr();
@ -47,6 +54,9 @@ const installView = ref(false);
 const intervalTask = ref<NodeJS.Timer>();
 const percentage = ref(0);
 const isInstalled = ref(false);
+const searchForm = reactive({
+  language: getCurrentLang()
+});

 const { state: newTaskInfo, execute: executeCreateAsyncTask } = createAsyncTask();

@ -156,56 +166,73 @@ onMounted(async () => {
    </a-row>
    <a-row v-else :gutter="[24, 24]" style="height: 100%">
      <a-col :span="24" :md="24">
-        <CardPanel style="height: 100%">
-          <template #title>{{ t("TXT_CODE_ef0ce2e") }}</template>
+        <!-- <CardPanel style="height: 100%">
+          <template #title>{{ t("筛选") }}</template>
          <template #body>
-            <a-typography-paragraph>
-              <a-typography-text>
-                {{ t("TXT_CODE_eec3c1d7")
-                }}<a href="https://aka.ms/MinecraftEULA" target="_blank" rel="noopener noreferrer">
-                  {{ t("TXT_CODE_1e58bb5e") }}
-                </a>
-              </a-typography-text>
-              <br />
-              <a-typography-text class="color-info">
-                {{ t("TXT_CODE_7153951e") }}
-              </a-typography-text>
-            </a-typography-paragraph>
+            
          </template>
-        </CardPanel>
+        </CardPanel> -->
+        <a-form layout="horizontal" :model="searchForm">
+          <a-form-item class="mb-0">
+            <a-radio-group v-model:value="searchForm.language">
+              <a-radio-button v-for="item in appLangList" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-radio-button>
+            </a-radio-group>
+          </a-form-item>
+        </a-form>
      </a-col>
      <a-col v-for="(item, i) in appList" :key="i" :span="24" :xl="6" :lg="8" :sm="12">
        <div style="display: flex; flex-grow: 1; flex-direction: column; height: 100%">
          <CardPanel style="flex-grow: 1">
-            <template #title>{{ item.mc }}</template>
+            <template #title>
+              <div class="ellipsis-text" style="max-width: 280px">
+                {{ item.title }}
+              </div>
+            </template>
            <template #body>
-              <div style="height: 13em">
+              <div style="min-height: 220px; position: relative">
                <a-typography-paragraph
-                  :ellipsis="{ rows: 3, expandable: true, symbol: t('TXT_CODE_f4c9715b') }"
-                  :content="item.info"
+                  :ellipsis="{ rows: 3, expandable: true }"
+                  :content="item.description"
                >
                </a-typography-paragraph>
                <a-typography-paragraph>
                  <a-typography-text class="color-info">
-                    {{ t("TXT_CODE_7b92d98d") }}: {{ item.java }}
+                    <div>{{ t("环境要求") }}: {{ item.runtime }}</div>
+                    <div>{{ t("硬件要求") }}: {{ item.hardware }}</div>
+                    <div>{{ t("大小") }}: {{ item.size }}</div>
                  </a-typography-text>
                  <br />
-                  <a-typography-text class="color-info">
-                    {{ t("TXT_CODE_88c990a4") }}: {{ item.size }} MB
-                  </a-typography-text>
+                  <a-typography-text class="color-info"> </a-typography-text>
                  <br />
-                  <a-typography-text class="color-info">
-                    {{ item.remark }}
-                  </a-typography-text>
+                  <a-typography-text class="color-info"> </a-typography-text>
                </a-typography-paragraph>
              </div>

-              <a-button block @click="handleSelectTemplate(item)">
-                <template #icon>
-                  <DownloadOutlined />
-                </template>
-                {{ t("TXT_CODE_1704ea49") }}
-              </a-button>
+              <div
+                style="
+                  position: absolute;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  display: flex;
+                  justify-content: center;
+                "
+              >
+                <a-button
+                  block
+                  type="primary"
+                  ghost
+                  style="max-width: 180px"
+                  @click="handleSelectTemplate(item)"
+                >
+                  <template #icon>
+                    <DownloadOutlined />
+                  </template>
+                  <span>{{ t("TXT_CODE_1704ea49") }}</span>
+                </a-button>
+              </div>
            </template>
          </CardPanel>
        </div>
--- a/languages/en_US.json
+++ b/languages/en_US.json
@ -1407,7 +1407,7 @@
  "TXT_CODE_477ece61": "Installation Complete",
  "TXT_CODE_eec3c1d7": "Installing listed modpacks will be considered as your agreement to and acknowledgment of the",
  "TXT_CODE_1e58bb5e": "Minecraft End User License Agreement (EULA)",
-  "TXT_CODE_7153951e": "Quick installation files are hosted by Duzui Technology.",
+  "TXT_CODE_7153951e": "The Quick installation service relies on third-party online platforms.",
  "TXT_CODE_f4c9715b": "View More",
  "TXT_CODE_7b92d98d": "Java Version Requirements",
  "TXT_CODE_88c990a4": "Modpack Size",
--- a/languages/zh_CN.json
+++ b/languages/zh_CN.json
@ -1408,7 +1408,7 @@
  "TXT_CODE_477ece61": "安装完毕",
  "TXT_CODE_eec3c1d7": "安装预设整合包将视作你已同意并阅读",
  "TXT_CODE_1e58bb5e": "Minecraft 最终用户协议（EULA)",
-  "TXT_CODE_7153951e": "快速安装服务由独醉科技提供文件下载支持",
+  "TXT_CODE_7153951e": "快速安装服务依赖第三方在线平台。",
  "TXT_CODE_f4c9715b": "查看更多",
  "TXT_CODE_7b92d98d": "Java版本要求",
  "TXT_CODE_88c990a4": "整合包大小",
--- a/panel/src/app/entity/setting.ts
+++ b/panel/src/app/entity/setting.ts
@ -30,7 +30,7 @@ export default class SystemConfig {
  // i18n
  language = "en_us";

-  // Quick installation address for the Chinese market
-  quickInstallAddr = "https://mcsmanager.oss-cn-guangzhou.aliyuncs.com/quick_install.json";
+  // Quick installation address
+  quickInstallAddr = "https://mcsmanager.oss-cn-guangzhou.aliyuncs.com/mcsmanager_packages.json";
  redisUrl = "";
 }