stash

Author: J-ZhengLi

locales/en-US.json

@@ -41,7 +41,8 @@
     "what_this_is": "This program will guide you through installing the Rust programming language, with additional third party tools of your choice.",
     "custom_install_help": "Enter the value of each installation options, or just press 'Enter' key to use the default value.",
     "installation_path": "Installation path",
-    "select_components_to_install": "Choose what components to install: (separated multiple options by spaces, required tools are automatically selected)",
+    "select_components_to_install": "Select components to install",
+    "select_components_cli_hint": "separated multiple options by spaces, required tools are automatically selected",
     "select_components_to_update": "Choose what components to update: (separated multiple options by spaces)",
     "select_components_to_remove": "Choose what components to remove: (separated multiple options by spaces)",
     "question_try_demo": "Do you want to try Rust with a demo project?",
@@ -121,9 +122,6 @@
     "package_source_missing_info": "One or more selected components require separated packages, you need to manually provide a path or link to install those.",
     "default_source_hint": "Note: If no input is provided and a default value exists, the default value will be used.",
     "question_package_source": "Enter the package source (path or url) for '%{tool}'",
-    "install_default": "default",
-    "install_everything": "everything",
-    "install_custom": "customize",
 
     "skip_ssl_check": "skip SSL certificate verification",
     "update_all": "Update all (including toolkit and toolkit manager)",

locales/zh-CN.json

@@ -39,7 +39,8 @@
     "what_this_is": "该程序将指导您安装 Rust 编程语言以及其他可选的第三方工具。",
     "custom_install_help": "请根据提示输入安装选项，或直接按回车键使用默认的值。",
     "installation_path": "安装路径",
-    "select_components_to_install": "请选择要安装的组件: (选择多个组件时请用空格键分隔；必要组件会自动添加，无需额外选择)",
+    "select_components_to_install": "选择要安装的组件",
+    "select_components_cli_hint": "选择多个组件时请用空格键分隔；必要组件会自动添加，无需额外选择",
     "select_components_to_update": "请选择要更新的组件: (选择多个组件时请用空格键分隔)",
     "select_components_to_remove": "请选择要卸载的组件: (选择多个组件时请用空格键分隔)",
     "question_try_demo": "是否要通过一个示例项目尝试 Rust 编程？",
@@ -117,9 +118,6 @@
     "package_source_missing_info": "一个或多个选定的组件需要额外配置安装包路径，您需要提供路径或链接来安装它们。",
     "default_source_hint": "注：如果未提供输入且存在默认值，则将使用默认值安装。",
     "question_package_source": "请输入 '%{tool}' 的安装包路径或链接",
-    "install_default": "默认安装",
-    "install_everything": "全量安装",
-    "install_custom": "自定义组件选择",
 
     "skip_ssl_check": "跳过 SSL 证书验证",
     "update_all": "全部更新 (包括套件及此管理工具)",

rim_gui/src-tauri/src/installer_mode.rs

@@ -115,6 +115,7 @@ async fn load_manifest_and_ret_version() -> Result<String> {
             .clone()
             .unwrap_or_default())
     } else {
+        debug!("manifest loaded");
         Ok(version)
     }
 }

rim_gui/src/components/BaseButton.vue

@@ -40,6 +40,7 @@ const themeClasses = computed(() => {
 <style scoped>
 button {
   font-size: clamp(100%, 3vh, 20px);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, .4);
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;

rim_gui/src/components/SplitBox.vue

@@ -0,0 +1,99 @@
+<template>
+    <base-card overflow-auto>
+        <div class="resizable-container" ref="container">
+            <div class="panel left-panel" :style="{ width: leftWidth + 'px' }" ref="leftPanel">
+                <slot name="left"></slot>
+            </div>
+            <div class="divider" @mousedown="startDrag"></div>
+            <div class="panel right-panel" ref="rightPanel">
+                <slot name="right"></slot>
+            </div>
+        </div>
+    </base-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+
+const container = ref<HTMLElement | null>(null)
+const leftPanel = ref<HTMLElement | null>(null)
+const leftWidth = ref(300)
+const minWidth = 100
+const isDragging = ref(false)
+
+const startDrag = (e: MouseEvent) => {
+    isDragging.value = true
+    document.addEventListener('mousemove', onDrag)
+    document.addEventListener('mouseup', stopDrag)
+    e.preventDefault()
+}
+
+const onDrag = (e: MouseEvent) => {
+    if (!isDragging.value || !container.value) return
+
+    const containerRect = container.value.getBoundingClientRect()
+    const newLeftWidth = Math.max(
+        minWidth,
+        Math.min(
+            e.clientX - containerRect.left,
+            containerRect.width - minWidth
+        )
+    )
+
+    leftWidth.value = newLeftWidth
+}
+
+const stopDrag = () => {
+    isDragging.value = false
+    document.removeEventListener('mousemove', onDrag)
+    document.removeEventListener('mouseup', stopDrag)
+}
+
+// Cleanup event listeners
+onUnmounted(stopDrag)
+</script>
+
+<style scoped>
+.resizable-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.panel {
+    height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+}
+
+.right-panel {
+    flex: 1;
+    padding-left: 2vw;
+}
+
+.divider {
+    width: 5px;
+    background-color: rgba(255, 255, 255, 0.7);
+    
+    cursor: col-resize;
+    position: relative;
+    transition: background-color 0.2s;
+}
+
+.divider:hover,
+.divider:active {
+    background-color: #aaa;
+}
+
+.divider::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 1px;
+    right: 1px;
+    height: 30px;
+    margin-top: -15px;
+    --uno: 'bg-primary'
+    border-radius: 2px;
+}
+</style>

rim_gui/src/theme/index.ts

@@ -13,6 +13,7 @@ import Background from '@/components/Background.vue';
 import Inputton from '@/components/Inputton.vue';
 import PageNavButtons from '@/components/PageNavButtons.vue';
 import BaseDetails from '@/components/BaseDetails.vue';
+import SplitBox from '@/components/SplitBox.vue';
 
 export default {
   install(app: App) {
@@ -30,5 +31,6 @@ export default {
     app.component('inputton', Inputton);
     app.component('page-nav-buttons', PageNavButtons);
     app.component('base-details', BaseDetails);
+    app.component('split-box', SplitBox);
   },
 };

rim_gui/src/utils/common.ts

@@ -0,0 +1,22 @@
+import { installConf } from "./installConf";
+import { invokeCommand } from "./invokeCommand";
+import { RestrictedComponent } from "./types/Component";
+
+/**
+ * Handle the restricted components before installation,
+ * as some components might need another package source.
+ * 
+ * @param onDefault The default callback where there aren't any restricted components.
+ * @param onRestricted Callback when restricted components detected in `installConf`.
+ */
+export function handleRestrictedComponents(onDefault: () => void, onRestricted: () => void) {
+  invokeCommand('get_restricted_components', { components: installConf.getCheckedComponents() }).then((res) => {
+    const restricted = res as RestrictedComponent[];
+    if (restricted.length > 0) {
+      installConf.setRestrictedComponents(restricted);
+      onRestricted();
+    } else {
+      onDefault();
+    }
+  });
+}

rim_gui/src/utils/installConf.ts

@@ -8,14 +8,12 @@ class InstallConf {
   path: Ref<string>;
   info: Ref<AppInfo | null> = ref(null);
   checkComponents: Ref<CheckItem<Component>[]>;
-  isCustomInstall: boolean;
   version: Ref<string>;
   restrictedComponents: Ref<RestrictedComponent[]>;
 
   constructor(path: string, components: CheckItem<Component>[]) {
     this.path = ref(path);
     this.checkComponents = ref(components);
-    this.isCustomInstall = true;
     this.version = ref('');
     this.restrictedComponents = ref([]);
   }
@@ -48,10 +46,6 @@ class InstallConf {
     this.restrictedComponents.value = comps;
   }
 
-  setCustomInstall(isCustomInstall: boolean) {
-    this.isCustomInstall = isCustomInstall;
-  }
-
   getGroups(): CheckGroup<Component>[] {
     const groups = this.checkComponents.value.reduce(
       (acc, item) => {
@@ -80,17 +74,20 @@ class InstallConf {
         return item.value as Component;
       });
   }
+
+  mapCheckedComponents(callback: (comp: CheckItem<Component>) => CheckItem<Component>) {
+    this.checkComponents.value = this.checkComponents.value.map(callback)
+  }
 
   getRestrictedComponents(): RestrictedComponent[] {
     return this.restrictedComponents.value;
   }
 
-  loadManifest() {
-    invokeCommand("load_manifest_and_ret_version").then((ver) => {
-      if (typeof ver === 'string') {
-        this.version.value = ver;
-      }
-    });
+  async loadManifest() {
+    const ver = await invokeCommand("load_manifest_and_ret_version");
+    if (typeof ver === 'string') {
+      this.version.value = ver;
+    }
   }
 
   async loadDefaultPath() {
@@ -122,8 +119,12 @@ class InstallConf {
   }
 
   async loadAll() {
-    await this.loadDefaultPath();
-    await this.loadComponents();
+    // make sure the manifest is loaded before loading components
+    // as it requires the manifest to be loaded.
+    this.loadManifest().then(async () => {
+      await this.loadDefaultPath();
+      await this.loadComponents();
+    });
   }
 }
 

rim_gui/src/utils/types/CheckBoxGroup.ts

@@ -3,7 +3,6 @@ import { Component } from 'vue';
 export interface CheckItem<T> {
   label: string;
   checked: boolean;
-  required?: boolean;
   disabled?: boolean;
   value: T;
 }

rim_gui/src/views/installer/ComponentsView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, Ref, ref, watch } from 'vue';
-import { componentUtils, installConf } from '@/utils/index';
+import { componentUtils, installConf, invokeLabelList } from '@/utils/index';
 import type {
   CheckGroup,
   CheckGroupItem,
@@ -9,8 +9,10 @@ import type {
 } from '@/utils/index';
 import { useCustomRouter } from '@/router/index';
 import CheckBoxGroup from '@/components/CheckBoxGroup.vue';
+import { handleRestrictedComponents } from '@/utils/common';
 
-const { routerBack } = useCustomRouter();
+const { routerBack, routerPush } = useCustomRouter();
+const labels = ref<Record<string, string>>({});
 const selectComponentId = ref(0);
 
 const groupComponents: Ref<CheckGroup<Component>[]> = ref([]);
@@ -49,7 +51,6 @@ function updateInstallConf() {
           label: item.label,
           checked: item.checked,
           disabled: item.disabled,
-          required: item.required,
           value: { ...item.value },
         };
       })
@@ -110,20 +111,35 @@ function handleSelectAll() {
 
 function handleNextClick() {
   updateInstallConf();
-  routerBack();
+  handleRestrictedComponents(
+    () => routerPush('/installer/confirmation'),
+    () => routerPush('/installer/customize_package_sources'),
+  );
 }
 
 onMounted(() => {
   groupComponents.value = installConf.getGroups();
+  
+  invokeLabelList(['select_components_to_install']).then((res) => {
+    labels.value = res;
+  });
 });
 </script>
 
 <template>
   <div flex="~ col" w="full" h="full">
-    <h4 ml="12px">安装选项</h4>
-    <div flex="1 ~" p="12px" overflow="auto">
+    <span class="info-label">{{ labels.select_components_to_install }}</span>
+    <!-- <div flex="1 ~" p="12px" mb="7%" overflow="auto">
       <base-card overflow-auto p="4px" grow="1">
-        <div p="t-8px l-8px">组件</div>
+        
+      </base-card>
+      <base-card overflow-auto basis="200px" grow="3" ml="12px">
+        
+      </base-card>
+    </div> -->
+    <split-box flex="1 ~" mt="1.5%" mb="10vh">
+      <template #left>
+        <span>组件</span>
         <div ml="1.5rem">
           <base-check-box flex="~ items-center" v-model="checkedAllBundle" title="全选">
             <template #icon>
@@ -137,17 +153,15 @@ onMounted(() => {
 
         <check-box-group v-for="group of groupComponents" :key="group.label" :group="group" expand
           @itemClick="handleComponentsClick" @change="handleComponentsChange" />
-      </base-card>
-      <base-card basis="200px" grow="4" ml="12px">
-        <div>组件详细信息</div>
+      </template>
+
+      <template #right>
+        <span>组件详细信息</span>
         <p font="b">{{ curCheckComponent?.value.displayName }}</p>
         <p>{{ curCheckComponent?.value.desc }}</p>
-      </base-card>
-    </div>
+      </template>
+    </split-box>
 
-    <div basis="60px" flex="~ justify-end items-center">
-      <base-button theme="primary" mr="12px" @click="routerBack">上一步</base-button>
-      <base-button theme="primary" mr="12px" @click="handleNextClick">下一步</base-button>
-    </div>
+    <page-nav-buttons @back-clicked="routerBack" @next-clicked="handleNextClick" />
   </div>
 </template>