🔱: [client] sync upgrade with 7 commits [trident-sync]

chore:
Merge branch 'vben'

# Conflicts:
#	package.json
perf: antdv示例改成使用vben框架
chore: vben
chore: vben
chore: vben

packages/ui/certd-client/src/vben/layouts/widgets/preferences/preferences.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import { Settings } from "/@/vben/icons";
+import { $t, loadLocaleMessages } from "/@/vben/locales";
+import { preferences, updatePreferences } from "/@/vben/preferences";
+import { capitalizeFirstLetter } from "/@/vben/utils";
+
+import { useVbenDrawer } from "/@/vben//popup-ui";
+import { VbenButton } from "/@/vben//shadcn-ui";
+
+import PreferencesDrawer from "./preferences-drawer.vue";
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  connectedComponent: PreferencesDrawer
+});
+
+/**
+ * preferences 转成 vue props
+ * preferences.widget.fullscreen=>widgetFullscreen
+ */
+const attrs = computed(() => {
+  const result: Record<string, any> = {};
+  for (const [key, value] of Object.entries(preferences)) {
+    for (const [subKey, subValue] of Object.entries(value)) {
+      result[`${key}${capitalizeFirstLetter(subKey)}`] = subValue;
+    }
+  }
+  return result;
+});
+
+/**
+ * preferences 转成 vue listener
+ * preferences.widget.fullscreen=>@update:widgetFullscreen
+ */
+const listen = computed(() => {
+  const result: Record<string, any> = {};
+  for (const [key, value] of Object.entries(preferences)) {
+    if (typeof value === "object") {
+      for (const subKey of Object.keys(value)) {
+        result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (val: any) => {
+          updatePreferences({ [key]: { [subKey]: val } });
+          if (key === "app" && subKey === "locale") {
+            loadLocaleMessages(val);
+          }
+        };
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+});
+</script>
+<template>
+  <div>
+    <Drawer v-bind="{ ...$attrs, ...attrs }" v-on="listen" />
+
+    <div @click="() => drawerApi.open()">
+      <slot>
+        <VbenButton :title="$t('preferences.title')" class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none">
+          <Settings class="size-5" />
+        </VbenButton>
+      </slot>
+    </div>
+  </div>
+</template>