feat: richer copyright and sidebar preferences

packages/business/widgets/src/preferences/blocks/input-item.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import { Input, VbenTooltip } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectListItem[];
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+  },
+);
+
+const inputValue = defineModel<string>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <Input v-model="inputValue" class="h-8 w-[160px]" />
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/layout/copyright.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { $t } from '@vben/locales';
 
+import InputItem from '../input-item.vue';
 import SwitchItem from '../switch-item.vue';
 
 defineOptions({
@@ -8,10 +9,34 @@ defineOptions({
 });
 
 const copyrightEnable = defineModel<boolean>('copyrightEnable');
+const copyrightDate = defineModel<string>('copyrightDate');
+const copyrightIcp = defineModel<string>('copyrightIcp');
+const copyrightIcpLink = defineModel<string>('copyrightIcpLink');
+const copyrightCompanyName = defineModel<string>('copyrightCompanyName');
+const copyrightCompanySiteLink = defineModel<string>(
+  'copyrightCompanySiteLink',
+);
 </script>
 
 <template>
   <SwitchItem v-model="copyrightEnable">
     {{ $t('preferences.copyright.enable') }}
   </SwitchItem>
+
+  <InputItem v-model="copyrightCompanyName" :disabled="!copyrightEnable">
+    {{ $t('preferences.copyright.company-name') }}
+  </InputItem>
+  <InputItem v-model="copyrightCompanySiteLink" :disabled="!copyrightEnable">
+    {{ $t('preferences.copyright.company-site-link') }}
+  </InputItem>
+  <InputItem v-model="copyrightDate" :disabled="!copyrightEnable">
+    {{ $t('preferences.copyright.date') }}
+  </InputItem>
+
+  <InputItem v-model="copyrightIcp" :disabled="!copyrightEnable">
+    {{ $t('preferences.copyright.icp') }}
+  </InputItem>
+  <InputItem v-model="copyrightIcpLink" :disabled="!copyrightEnable">
+    {{ $t('preferences.copyright.icp-link') }}
+  </InputItem>
 </template>

packages/business/widgets/src/preferences/blocks/layout/sidebar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { $t } from '@vben/locales';
 
+import NumberFieldItem from '../number-field-item.vue';
 import SwitchItem from '../switch-item.vue';
 
 defineOptions({
@@ -10,6 +11,7 @@ defineOptions({
 defineProps<{ disabled: boolean }>();
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarWidth = defineModel<number>('sidebarWidth');
 const sidebarCollapsedShowTitle = defineModel<boolean>(
   'sidebarCollapsedShowTitle',
 );
@@ -18,15 +20,24 @@ const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
 
 <template>
   <SwitchItem v-model="sidebarEnable" :disabled="disabled">
-    {{ $t('preferences.side-visible') }}
+    {{ $t('preferences.sidebar.visible') }}
   </SwitchItem>
   <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
-    {{ $t('preferences.collapse') }}
+    {{ $t('preferences.sidebar.collapsed') }}
   </SwitchItem>
   <SwitchItem
     v-model="sidebarCollapsedShowTitle"
     :disabled="!sidebarEnable || disabled"
   >
-    {{ $t('preferences.collapse-show-title') }}
+    {{ $t('preferences.sidebar.collapsed-show-title') }}
   </SwitchItem>
+  <NumberFieldItem
+    v-model="sidebarWidth"
+    :disabled="!sidebarEnable || disabled"
+    :max="320"
+    :min="160"
+    :step="10"
+  >
+    {{ $t('preferences.sidebar.width') }}
+  </NumberFieldItem>
 </template>

packages/business/widgets/src/preferences/blocks/layout/tabbar.vue

@@ -20,7 +20,4 @@ const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.icon') }}
   </SwitchItem>
-  <!-- <SwitchItem v-model="sideCollapseShowTitle" :disabled="!tabsVisible">
-    {{ $t('preferences.collapse-show-title') }}
-  </SwitchItem> -->
 </template>

packages/business/widgets/src/preferences/blocks/number-field-item.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectListItem[];
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+  },
+);
+
+const inputValue = defineModel<number>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+
+    <NumberField v-model="inputValue" v-bind="$attrs" class="w-[160px]">
+      <NumberFieldContent>
+        <NumberFieldDecrement />
+        <NumberFieldInput />
+        <NumberFieldIncrement />
+      </NumberFieldContent>
+    </NumberField>
+  </div>
+</template>

packages/business/widgets/src/preferences/blocks/select-item.vue

@@ -54,7 +54,7 @@ const slots = useSlots();
       </VbenTooltip>
     </span>
     <Select v-model="selectValue">
-      <SelectTrigger class="h-7 w-[140px]">
+      <SelectTrigger class="h-8 w-[160px]">
         <SelectValue :placeholder="placeholder" />
       </SelectTrigger>
       <SelectContent>

packages/business/widgets/src/preferences/blocks/switch-item.vue

@@ -26,7 +26,7 @@ function handleClick() {
     :class="{
       'pointer-events-none opacity-50': disabled,
     }"
-    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2"
+    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5"
     @click="handleClick"
   >
     <span class="flex items-center text-sm">