shalu-velofex/apps/web-velofex/src/views/dashboard/tool-downloads/index.vue

<script setup lang="ts">
import { ref } from 'vue';

import { $t } from '@/locales';
import { Button } from 'antdv-next';

const toolData = [
  {
    name: '开发环境',
    id: '0996f07a-96f0-4554-8dc6-03f29793e1d3',
    type: true,
    list: [
      {
        body: '支持任何格式转换Pdf的开源的Office环境, 配合文件预览使用。',
        classify: '开发环境',
        downloadUrl:
          '/File/Download?fileId=677ca43a-27e9-499a-8273-29c9694715d9',
        id: '0ef48c90-72f1-435a-a1cc-73244089bd06',
        name: 'LibreOffice_7.5',
      },
      {
        body: '将java.policy和java.security文件替换到Java安装目录的conf/security<br/>例如：Java安装目录为：C:/Program Files/Java/jdk-11<br/>那么复制到C:/Program Files/Java/jdk-11/conf/security替换原来的文件即可。',
        classify: '开发环境',
        downloadUrl:
          '/File/Download?fileId=7e8d2517-80da-470b-9030-4c9d20effb88',
        id: '188a4ac3-6853-4cc3-b0ee-29ce79a9f90b',
        name: 'JDK11-安全文件',
      },
      {
        body: 'JDK11版本压缩版（内含安全文件）',
        classify: '开发环境',
        downloadUrl:
          '/File/Download?fileId=fed61f8a-b7b6-4ccc-a611-9898b481d1dd',
        id: '2525ca5e-6bba-4bd6-8fd6-71a69579acf3',
        name: 'jdk-11.0.28',
      },
      {
        body: '发布时间2023-07-24:<br/><br/>1. start.cmd为启动脚本<br/>2. mongodb-compass.exe为可视化数据库UI管理界面<br/>3. mongosh.exe为命令行运行环境<br/>4. data目录为mongodb的数据库数据存储的地方。<br/>5. 缺少c++运行库的话，请运行安装vc_redist.x64.exe文件.<br/>6. 下载后，请放在低代码开发环境资源包根目录下。',
        classify: '开发环境',
        downloadUrl:
          '/File/Download?fileId=07477ab5-6a95-4057-b1b2-41c43ce73edb',
        id: '8b16b6bc-3968-4a8e-911b-a5feb3046d21',
        name: '低代码开发环境资源包-Mongodb插件',
      },
      {
        body: 'Java低代码开发环境资源包，开发人员所需要的资源环境，包括以下：MySQL, Redis, RabbitMQ, Nacos等相关资源，快速一键安装。',
        classify: '开发环境',
        downloadUrl:
          '/File/Download?fileId=888e89c6-418a-4af3-b167-a27b39813bd0',
        id: 'd0992eb8-d90a-4ec9-bab2-f8a478a358a8',
        name: '低代码开发环境资源包',
      },
    ],
  },
  {
    name: '代码小工具',
    id: 'f63ac3b8-82a1-41df-ab75-91c266150276',
    type: true,
    list: [
      {
        body: '支持在idea中，提交沙鹿业务代码及框架代码，类似git<br/><br/>1. v1.0.2(2024/06/03)<br/>修复了已知bug<br/>优化了pull目录<br/>网络异常提示错误。<br/>修复了文件复制后，无法推送文件的问题<br/>修复了自动删除目录问题。<br/><br/>2. v1.0.3(2024/06/03)<br/>优化了拉取代码进度提示<br/><br/>3. V1.0.4(2024/06/09)<br/>优化了idea性能<br/>增加了Shalu项目Clone功能。<br/>修复了多选文件提交报错问题。<br/><br/>4. V1.0.5(2024/06/15)<br/>优化了Clone速度问题<br/>修复了复制文件无法感知文件修改的问题。<br/><br/>5. V1.0.6(2024/06/17)<br/>修复了同步代码覆盖本地最新代码的风险。<br/><br/>6. V1.0.7(2024/06/17)<br/>继承.gitignore文件特性，忽略不需要提交的代码路径和文件。<br/><br/>7. V1.0.8(2024/06/17)<br/>修复了复制目录到idea后，代码提交不全问题。<br/>优化了目录代码提交，进度显示。<br/><br/>8. V1.0.9(2024/06/20)<br/>优化了clone体验。<br/><br/>9. V1.0.10(2024/07/05)<br/>修复了报错信息.<br/><br/>10. v1.0.11(2024/09/21)<br/>修复了无法删除目录的问题。<br/><br/>11. v1.0.12(2024/12/11)<br/>优化了拉起最新代码功能<br/>修复了删除目录导致文件丢失问题<br/><br/>12. v1.0.13(2024/12/24)<br/>修复了拉取最新代码拉不到最新代码的问题。<br/>修复了拉取最新代码界面卡死问题。<br/><br/>13. v1.0.14(2025/02/10)<br/>修复了克隆项目完成后，不更新最后拉取代码时间<br/><br/>14. v1.0.15(2025/02/14)<br/>地址支持企业端或其他地址<br/>支持2024.3.3版本支持<br/><br/>15. v1.0.16(2025/04/13)<br/>修复了删除文件后重建文件后提交不上去问题。<br/>修复了删除文件后重建文件后同步文件消失问题。',
        classify: '代码小工具',
        downloadUrl:
          '/File/Download?fileId=4281a84f-67a0-44a6-8bcd-fbac9fb72610',
        id: '1311b415-f168-4fd4-8083-0b0509d16875',
        name: 'Shalu Git Tools(v1.0.16)',
      },
      {
        body: '此文件用于初始第一次使用离线下载，运行后可根据提示更新到最新版本使用最新功能，否则过渡版本可能会有部分功能不可用。',
        classify: '代码小工具',
        downloadUrl:
          '/File/Download?fileId=909efbc8-21b4-4881-bb8c-569c442a04fb',
        id: '65209468-b46a-4d2a-b56c-0ca862cc6b9b',
        name: '代码小工具（安装版本）',
      },
      {
        body: '仅用于更新，不可单独使用，如需单独使用，请下载安装版本。<br/>发布时间2023-05-05:<br/>A端代码代码开发及管理小工具。<br/>1、界面风格及功能优化调整<br/>2、新增接口测试相关功能。<br/>2023-05-08 : 修复测试接口分页对象封装格式异常问题和第一次初始化删除文件未能正确设置正确状态问题<br/>2023-08-08 : 增加代码历史变更查看以及优化接口测试按钮防抖。<br/>2023-09-08 : 增加自动更新小程序。<br/>2023-09-12 ：V3.2 增加小工具代码提交覆盖检测功能，如果提交过程中有新版本则无法提交<br/>2023-09-15 ：V3.3 更新小程序相关主题样式效果。<br/>2023-09-22：v3.4更新<br/>1.代码小工具，增加智能提示，java包含框架中常用所需提示<br/>2.更新代码编辑相关展示样式，编辑页增加上下差异切换按钮<br/>3.小工具代码编辑页增加搜索相关组件<br/>2023-10-17：v3.5更新样式和修复AppPages页面层级太深显示不全的问题。<br/>2023-12-19：企业配置扩展测试接口相关配置，部分细节优化。<br/>2023-12-28：修复部分bug，调试地址及小工具升级优化。<br/>2024-01-24：性能调优，增加过渡效果以及模糊搜索方式，新增调试接口账户类属性设置以及代码树功能等。<br/>2024-02-05：修复代码提交列表，对比后刷新列表不自动选中对比文件问题，增加版本号显示。',
        classify: '代码小工具',
        downloadUrl:
          '/File/Download?fileId=4184093f-aec3-4bdc-9c91-c5c72d8cc796',
        id: 'c00a19fe-3f29-4bb1-b635-d9940db10515',
        name: '代码小工具更新包',
      },
    ],
  },
  {
    name: '系统部署',
    id: 'e8e894d7-07e4-4079-aa62-5a7f1f0860ea',
    type: true,
    list: [
      {
        body: 'K8s部署包v1.0.0<br/>注意：目录结构 <br/>1. /home/system/prod/common-system-all<br/>2. /home/system/prod/public-share-data<br/>命令：mkdir /home/system/prod/common-system-all /home/system/prod/public-share-data<br/><br/>支持的服务：<br/>1. mysql<br/>2. redis<br/>3. rabbitmq<br/>4. nacos<br/>5. phpmyadmin<br/>6. nginx',
        classify: '系统部署',
        downloadUrl:
          '/File/Download?fileId=c1e3771a-f47a-4427-8a32-8a7ce3ac3e2f',
        id: '15d24b1b-16d1-4882-9207-49e19d914277',
        name: 'K8s部署包',
      },
      {
        body: 'DockerCompose部署包v1.0.0<br/>注意：建议目录结构 <br/>1. /home/system/prod/common-system-all<br/>2. /home/system/prod/public-share-data<br/>命令：mkdir /home/system/prod/common-system-all /home/system/prod/public-share-data<br/><br/>支持的服务：<br/>1. mysql<br/>2. redis<br/>3. rabbitmq<br/>4. nacos<br/>5. phpmyadmin<br/>6. nginx',
        classify: '系统部署',
        downloadUrl:
          '/File/Download?fileId=2ec86db0-5b20-4e40-975a-0f3998ead37d',
        id: '4c5c0024-0e22-464e-9a1a-34c5739d6607',
        name: 'DockerCompose部署包',
      },
      {
        body: 'ELang环境安装',
        classify: '系统部署',
        downloadUrl:
          '/File/Download?fileId=d45ee7ab-bb78-440d-b159-b1dc83210fb9',
        id: '5c8c1ca2-4174-4f51-9803-3670d8ad79ca',
        name: 'otp_win64_25.2.3.exe',
      },
      {
        body: '企业端DockerCompose部署包',
        classify: '系统部署',
        downloadUrl:
          '/File/Download?fileId=f6d53ba0-e5ac-44b4-80ce-df368ecd9a3f',
        id: '6890ef1c-9c3a-4ac2-87d5-f58148421750',
        name: '企业端DockerCompose部署包',
      },
      {
        body: 'Shalu根证书',
        classify: '系统部署',
        downloadUrl:
          '/File/Download?fileId=3fb28a56-23dc-475b-9bb1-93d842c89ba1',
        id: '83397601-0907-44c0-9ab1-cd75b2fe0cab',
        name: 'ShaluRootCA',
      },
    ],
  },
  {
    name: '开发文档',
    id: '69fcd2cb-f793-4c55-9524-22745c8d3eef',
    type: true,
    list: [
      {
        body: '沙鹿低代码平台对外标准文档套件。<br/>1. 沙鹿BPM引擎对外标准接口说明文档',
        classify: '开发文档',
        downloadUrl:
          '/File/Download?fileId=838d8610-3b50-4a93-9ece-f3e93f6e7566',
        id: '3f0d2085-78ba-46a0-9505-21f4dab2fcd9',
        name: '沙鹿低代码平台对外标准文档套件v1.0.0',
      },
    ],
  },
];

const selectedTool = ref<any>(null);
const expandedCategories = ref<Record<string, boolean>>({});

function handleBack() {
  window.history.back();
}

function handleDownload(url: string) {
  if (url) {
    window.open(url, '_blank');
  }
}

function selectCategory(category: any) {
  if (category.list && category.list.length > 0) {
    selectedTool.value = category.list[0];
  }
}

function toggleCategory(categoryId: string) {
  expandedCategories.value[categoryId] = !expandedCategories.value[categoryId];
}
</script>

<template>
  <div class="p-5">
    <div class="mb-4 flex items-center justify-between">
      <div class="text-sm text-[#462424] text-gray-500">
        {{ $t('toolDownloads.breadcrumb') }}
      </div>
      <div
        class="flex cursor-pointer items-center gap-[9px] text-[16px] font-bold text-[#462424]"
        @click="handleBack"
      >
        <div
          class="global-color flex h-[22px] w-[22px] items-center justify-center rounded-full"
        >
          <img
            alt=""
            class="h-[11px] w-[10px]"
            src="@/assets/image/the-left.png"
          />
        </div>
        {{ $t('btn.back') }}
      </div>
    </div>

    <div class="mb-8 text-[26px] font-bold text-[#462424]">
      {{ $t('toolDownloads.title') }}
    </div>

    <div class="mx-auto flex gap-6">
      <div
        class="h-[600px] w-64 overflow-y-auto rounded-lg bg-white p-4 shadow-md"
      >
        <div class="space-y-2">
          <div
            v-for="category in toolData"
            :key="category.id"
            class="space-y-1"
          >
            <div
              class="flex cursor-pointer items-center justify-between rounded px-3 py-2 font-medium text-[#462424] transition-colors hover:bg-gray-100"
              @click="toggleCategory(category.id)"
            >
              <span @click.stop="selectCategory(category)">{{
                category.name
              }}</span>
              <span class="text-[10px]">
                {{ expandedCategories[category.id] ? '▼' : '▶' }}
              </span>
            </div>
            <div v-if="expandedCategories[category.id]" class="space-y-1 pl-6">
              <div
                v-for="tool in category.list"
                :key="tool.id"
                class="cursor-pointer rounded px-3 py-1 text-sm text-gray-600 transition-colors hover:bg-gray-100"
                @click="selectedTool = tool"
              >
                {{ tool.name }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="h-[600px] flex-1 overflow-y-auto rounded-lg bg-white p-6 shadow-md"
      >
        <div v-if="selectedTool" class="space-y-6">
          <div class="flex items-center justify-between">
            <div class="text-xl font-bold text-[#462424]">
              {{ selectedTool.name }}
            </div>
            <Button
              class="h-[40px] rounded-[8px] bg-[#462424] px-8 text-white"
              @click="handleDownload(selectedTool.downloadUrl)"
            >
              {{ $t('toolDownloads.download') }}
            </Button>
          </div>
          <div
            class="leading-relaxed text-gray-600"
            v-html="selectedTool.body"
          ></div>
        </div>
        <div v-else class="py-16 text-center text-gray-500">
          <div class="mb-4 text-4xl">📁</div>
          请从左侧选择一个工具
        </div>
      </div>
    </div>
  </div>
</template>