redesign manager home page

Author: J-ZhengLi

locales/en-US.json

@@ -63,6 +63,7 @@
 	"fetching": "fetching",
 	"finish": "Finish",
 	"general": "General",
+	"available_toolkit": "Available Toolkit",
 	"handling_extension_info": "%{op}ing extension '%{ext}' for program '%{program}'",
 	"insecure_download": "skipping SSL certificate verification (requested by `--insecure` flag)",
 	"insecure_http_override": "using 'http' schema to skip SSL certificate verification (requested by `--insecure` flag)",
@@ -83,6 +84,7 @@
 	"install_via_cargo": "Installing third-party tools via cargo...",
 	"installation_path": "Installation path",
 	"installed": "installed",
+	"current_toolkit": "Current Toolkit",
 	"installer": "installer",
 	"installer_help": "installation of this tool will start a separated installer process that might needs your input.",
 	"installing": "Installing",

locales/zh-CN.json

@@ -63,6 +63,7 @@
 	"fetching": "正在获取",
 	"finish": "完成",
 	"general": "通用",
+	"available_toolkit": "可用套件",
 	"handling_extension_info": "正在%{op} '%{program}' 的以下插件: '%{ext}'",
 	"insecure_download": "跳过 SSL 证书验证（根据命令行选项 'insecure' 的要求）",
 	"insecure_http_override": "使用 “http” 跳过 SSL 证书验证（根据命令行选项 'insecure' 的要求）",
@@ -83,6 +84,7 @@
 	"install_via_cargo": "正在通过 cargo 安装第三方工具...",
 	"installation_path": "安装路径",
 	"installed": "已安装",
+	"current_toolkit": "当前套件",
 	"installer": "安装程序",
 	"installer_help": "此工具的安装将启动一个单独的安装程序进程，可能需要您的输入。",
 	"installing": "正在安装",

rim_gui/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
 import Titlebar from './components/Titlebar.vue';
 import { invokeCommand } from './utils';
 import { event } from '@tauri-apps/api';
@@ -9,7 +9,7 @@ import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
 const managerMode = ref(false);
-const navItems = ref([
+const navItems = computed(() => [
   {
     name: t('manage_toolkit'),
     showDot: ref(false),
@@ -53,7 +53,7 @@ async function updateDots() {
 
   event.listen('toolkit:update-available', (event) => {
     console.log("toolkit update available: ", event.payload);
-    navItems.value[0].showDot = true;
+    navItems.value[0].showDot.value = true;
   });
 }
 
@@ -81,7 +81,7 @@ onBeforeUnmount(() => {
           <li v-for="(item, index) in navItems" :key="index" class="nav-item"
             :class="{ active: selectedIndex === index }" @click="selectNav(index)" ref="navRefs">
             {{ item.name }}
-            <span class="red-dot" v-if="item.showDot"></span>
+            <span class="red-dot" v-if="item.showDot.value"></span>
           </li>
         </ul>
         <div class="underline" :style="underlineStyle"></div>
@@ -121,6 +121,28 @@ main {
   margin-top: 10vh;
   overflow: hidden;
 }
+
+.info-label {
+  --uno: "c-regular";
+  font-weight: bold;
+  font-size: clamp(8px, 2.6vh, 22px);
+  margin-inline: 1vw;
+}
+
+.sub-info-label {
+  --uno: "c-secondary";
+  font-size: clamp(6px, 2.2vh, 20px);
+  margin-inline: 1vw;
+}
+
+.footer-label {
+  --uno: c-secondary;
+  position: fixed;
+  font-size: 14px;
+  text-align: center;
+  width: 100%;
+  bottom: 3vh;
+}
 </style>
 
 <style scoped>

rim_gui/src/components/BaseButton.vue

@@ -18,29 +18,27 @@ const themeClasses = computed(() => {
   switch (props.theme) {
     case 'primary':
       return 'bg-primary text-white active:bg-deep-primary';
-    case 'secondary-btn':
-      return 'bg-secondary-btn text-header';
+    case 'secondary':
+      return 'bg-secondary-btn text-regular';
     // Add more themes as needed
     default:
-      return 'bg-gray-200 text-header border-gray-400 active:bg-gray-300';
+      return 'bg-gray-200 text-regular border-gray-400 active:bg-gray-300';
   }
 });
 </script>
 
 <template>
-  <button p="x-3% y-1%" :class="[
-    themeClasses,
-    'rounded-[30vw] b-none hover:op-80', // Common classes
-    { 'cursor-pointer': !disabled }, // Disabled styles
-    { 'opacity-50 cursor-not-allowed': disabled }, // Disabled styles
-  ]" :disabled="disabled">
+  <button :class="[themeClasses, disabled ? 'button-disabled' : 'button-active']" :disabled="disabled">
     <slot></slot>
   </button>
 </template>
 
 <style scoped>
 button {
+  padding: 3% 2.5%;
   font-size: clamp(100%, 3vh, 20px);
+  border-radius: 100px;
+  border: none;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 8px 16px rgba(0, 0, 0, .12);
   font-weight: bold;
   white-space: nowrap;
@@ -50,4 +48,18 @@ button {
     background-color 0.3s,
     border-color 0.3s;
 }
+
+.button-active {
+  cursor: pointer;
+}
+
+.button-active:hover {
+  opacity: 90%;
+  box-shadow: 0 0 0 1px rgba(91, 155, 213, .12), 0 6px 12px rgba(91, 155, 213, .8);
+}
+
+.button-disabled {
+  cursor: not-allowed;
+  opacity: 50%;
+}
 </style>

rim_gui/src/components/BaseCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="glass" :class="props.interactive ? 'interactive' : ''">
+    <div class="glass" :class="{'interactive': props.interactive}">
         <slot></slot>
     </div>
 </template>
@@ -19,7 +19,7 @@ const props = defineProps({
     border-radius: 20px;
     background: rgba(255, 255, 255, .1);
     border: 2px solid transparent;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 16px 32px rgba(0, 0, 0, .12);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 12px 16px rgba(0, 0, 0, .12);
     backdrop-filter: blur(25px);
     -webkit-backdrop-filter: blur(25px);
     outline: 0;
@@ -29,6 +29,6 @@ const props = defineProps({
     cursor: pointer;
 }
 .interactive:hover {
-    box-shadow: 0 0 0 2px rgba(91, 155, 213, .12), 0 16px 32px rgba(91, 155, 213, .8);
+    box-shadow: 0 0 0 2px rgba(91, 155, 213, .12), 0 12px 16px rgba(91, 155, 213, .8);
 }
 </style>

rim_gui/src/components/BaseRadioGroup.vue

@@ -1,6 +1,6 @@
 <template>
     <div flex="~ items-center" position="fixed" bottom="7%">
-      <base-button v-if="backLabel" theme="secondary-btn" position="fixed" left="0" style="transform: translateX(30%);"
+      <base-button v-if="backLabel" theme="secondary" position="fixed" left="0" style="transform: translateX(30%);"
         @click="backClicked">{{ backLabel }}</base-button>
       <base-button v-if="nextLabel" theme="primary" position="fixed" right="0" style="transform: translateX(-30%);"
         @click="nextClicked">{{ nextLabel }}</base-button>

rim_gui/src/components/PageNavButtons.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { installConf, invokeCommand } from "@/utils";
+import { invokeCommand } from "@/utils";
 import { appWindow } from "@tauri-apps/api/window";
 import { computed, onMounted, ref, shallowRef, watch } from "vue";
 import { event } from "@tauri-apps/api";
 import { useI18n } from "vue-i18n";
 import SettingsLayout from "@/layouts/SettingsLayout.vue";
 import AboutLayout from "@/layouts/AboutLayout.vue";
 import HelpLayout from "@/layouts/HelpLayout.vue";
+import { getAppNameWithVersion } from "@/utils/common";
 
 interface MenuItem {
     icon?: string,
@@ -94,7 +95,7 @@ onMounted(async () => {
         }
     });
 
-    appTitle.value = await installConf.appNameWithShortVersion();
+    appTitle.value = (await getAppNameWithVersion()).join(' ');
 });
 
 watch(locale, (_) => refreshLabels());

rim_gui/src/components/Titlebar.vue

@@ -31,7 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { installConf, invokeCommand } from '@/utils';
+import { invokeCommand } from '@/utils';
+import { getAppNameWithVersion } from '@/utils/common';
 import { shell } from '@tauri-apps/api';
 import { onMounted, ref } from 'vue';
 
@@ -55,7 +56,10 @@ async function openOfficialSite() {
 
 async function refreshLabels() {
     labels.value.logoText = await invokeCommand('get_build_cfg_locale_str', { key: 'logo_text' }) as string;
-    labels.value.appName = await invokeCommand('get_build_cfg_locale_str', { key: 'app_name' }) as string;
+
+    const nameAndVer = await getAppNameWithVersion();
+    labels.value.appName = nameAndVer[0];
+    rimVersion.value = nameAndVer[1];
 }
 
 async function fetchContributors() {
@@ -96,10 +100,6 @@ async function fetchContributors() {
 onMounted(async () => {
     await refreshLabels();
     await fetchContributors();
-
-    if (installConf.info.value) {
-        rimVersion.value = installConf.info.value.version;
-    }
 });
 </script>
 

rim_gui/src/layouts/AboutLayout.vue

@@ -15,7 +15,6 @@ import BaseDetails from '@/components/BaseDetails.vue';
 import SplitBox from '@/components/SplitBox.vue';
 import LabeledInput from '@/components/LabeledInput.vue';
 import BasePanel from '@/components/BasePanel.vue';
-import BaseRadioGroup from '@/components/BaseRadioGroup.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
 export default {
@@ -37,6 +36,5 @@ export default {
     app.component('labeled-input', LabeledInput);
     app.component('base-panel', BasePanel);
     app.component('base-select', BaseSelect);
-    app.component('base-radio-group', BaseRadioGroup);
   },
 };