fix: some input box has wrong type (#32)

src/Main.vue

@@ -21,10 +21,10 @@
  title="游戏"
  icon="gamepad"
  @click="changePage($event, 'game')"></sidebar-item>
- <sidebar-item
-  title="扩展"
-  icon="puzzle-piece"
-  @click="changePage($event, 'community')"></sidebar-item>
+ <!-- <sidebar-item -->
+ <!-- title="扩展" -->
+ <!-- icon="puzzle-piece" -->
+ <!-- @click="changePage($event, 'community')"></sidebar-item> -->
  <sidebar-item
  title="设置"
  icon="nav-5"

src/components/AssetsManager.vue

@@ -15,11 +15,11 @@
  :description="modManagerDesc"
  margin="0,0,10,0"
  @click="show.mods = true"></card-button>
- <card-button
-  icon="puzzle-piece"
-  title="截图"
-  margin="0,0,0,0"
-  description="正在加载"></card-button>
+ <!-- <card-button -->
+ <!-- icon="puzzle-piece" -->
+ <!-- title="截图" -->
+ <!-- margin="0,0,0,0" -->
+ <!-- description="正在加载"></card-button> -->
  </div>
  <div class="second-row">
  <card-button
@@ -29,18 +29,18 @@
  :description="resourcepacksManagerDesc"
  margin="0,0,10,0"
  @click="show.resourcepacks = true"></card-button>
- <card-button
-  icon="lightbulb-on"
-  title="光影包"
-  :class="shaderpackIsLoading ? 'disabled' : ''"
-  :description="shaderpacksManagerDesc"
-  margin="0,0,10,0"
-  @click="show.shaderpacks = true"></card-button>
- <card-button
-  icon="puzzle-piece"
-  title="投影"
-  margin="0,0,0,0"
-  description="正在加载"></card-button>
+ <!-- <card-button -->
+ <!-- icon="lightbulb-on" -->
+ <!-- title="光影包" -->
+ <!-- :class="shaderpackIsLoading ? 'disabled' : ''" -->
+ <!-- :description="shaderpacksManagerDesc" -->
+ <!-- margin="0,0,10,0" -->
+ <!-- @click="show.shaderpacks = true"></card-button> -->
+ <!-- <card-button -->
+ <!-- icon="puzzle-piece" -->
+ <!-- title="投影" -->
+ <!-- margin="0,0,0,0" -->
+ <!-- description="正在加载"></card-button> -->
  </div>
  <worlds
  :show="show.worlds"

src/components/SettingItem.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
 const props = withDefaults(
  defineProps<{
@@ -39,7 +39,7 @@ const style = computed(() => {
  result += "background-color: #08080800 !important;";
  }
  if (props.disabled) {
- result += "opacity: 0.5;";
+ result += "opacity: 0.5; pointer-events: none;";
  }
  return result;
 });
@@ -52,7 +52,6 @@ const style = computed(() => {
  justify-content: space-between;
  align-items: center;
  transition: all 0.1s ease;
- // border-radius: var(--border-radius-large);
  background-color: #08080800;
  border-bottom: 1px solid #00000079;
  margin: 0;

src/components/controllers/TextInputBox.vue

@@ -1,31 +1,52 @@
 <template>
  <div class="input-box" :style="`width: ${width};`">
- <input
- type="text"
- :title="name"
- :placeholder="placeholder"
- required
- v-model="model"
- :style="error ? 'outline: rgb(127,0,0)' : ''" />
+ <input @focusin="updateOld" @focusout="checkValue" :type="numberOnly ? 'number' : 'text'" :title="name" :placeholder="placeholder" required
+ v-model="model" :style="error ? 'outline: rgb(127,0,0)' : ''" :disabled="disabled" />
  </div>
 </template>
 
 <script setup lang="ts">
-withDefaults(
+import { computed } from "vue";
+import { watch } from "vue";
+
+const props = withDefaults(
  defineProps<{
  name?: string;
  placeholder?: string;
  type?: string;
  error?: boolean;
  width?: string;
+ numberOnly?: boolean;
+ disabled?: boolean;
  }>(),
  {
  type: "text",
  width: "400px",
+ numberOnly: false,
+ disabled: false
  },
 );
 
 const model = defineModel();
+let oldValue: number
+function updateOld(event: any) {
+ if (props.numberOnly) {
+ oldValue = model.value as number
+ console.log(oldValue)
+ }
+}
+function checkValue(event: any) {
+ console.log(event.target.value.trim())
+ if (!props.numberOnly) {
+ return;
+ }
+ let value = event.target.value.trim();
+ console.log(oldValue)
+ if (!/^[1-9]\d*$|^$/.test(value) || value.length == 0) {
+ model.value = oldValue;
+ event.target.value = oldValue
+ }
+}
 </script>
 
 <style lang="less" scoped>
@@ -38,7 +59,6 @@ const model = defineModel();
  padding: 0;
  font-size: 15px;
  transition: all 0.1s ease;
- pointer-events: all;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
 }

src/pages/Game.vue

@@ -76,6 +76,7 @@
  <i class="chevron-right" style="font-size: 12px"></i>
  </button>
  </div>
+ <list-item style="border-radius: 10px;" title="Broken Deer" description="愚蠢" logo="https://launcher.btlcraft.top/assets/brokendeer.webp"></list-item>
  </div>
  </div>
  </div>
@@ -92,6 +93,7 @@ import InstanceManager from "@/pages/dialogs/InstanceManager.vue";
 import { reactive, ref, type Ref } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
+import ListItem from "@/components/ListItem.vue"
 
 let installing = ref(false);
 

src/pages/settings/Download.vue

@@ -6,13 +6,19 @@
  title="最大连接数"
  description="限制同时与服务器建立的连接数量，只对安装时的下载有效，<strong>过大反而会降低速度！</strong>"
  icon="link">
- <TextInputBox width="100px" v-model.number="config.max_connection"></TextInputBox>
+ <TextInputBox
+ width="100px"
+ :number-only="true"
+ v-model.number="config.max_connection"></TextInputBox>
  </setting-item>
  <setting-item
  title="最大下载速度(单位：B/s)"
  description="限制下载速度，只对安装时的下载有效，必须大于1024才有效，设置为 0 以禁用"
  icon="gauge">
- <TextInputBox width="100px" v-model.number="config.max_download_speed"></TextInputBox>
+ <TextInputBox
+ width="100px"
+ :number-only="true"
+ v-model.number="config.max_download_speed"></TextInputBox>
  </setting-item>
  <setting-item
  title="镜像服务器"

src/pages/settings/Game.vue

@@ -52,11 +52,15 @@
  width="100px"
  style="display: inline-block; margin-right: 16px"
  placeholder="宽"
+ :number-only="true"
+ :disabled="config.launch.fullscreen"
  v-model.number="config.launch.width"></TextInputBox>
  <TextInputBox
  width="100px"
  style="display: inline-block"
  placeholder="高"
+ :number-only="true"
+ :disabled="config.launch.fullscreen"
  v-model.number="config.launch.height">
  </TextInputBox>
  </setting-item>