feat: support pwa

2025-08-26 16:46:19 +08:00 · 2024-06-16 15:45:15 +08:00
parent 222c73963d
commit 382652e0f4
24 changed files with 1787 additions and 128 deletions
--- a/packages/@core/forward/preferences/src/preferences.ts
+++ b/packages/@core/forward/preferences/src/preferences.ts
@@ -245,7 +245,11 @@ class PreferenceManager {
    this.initialPreferences = merge({}, overrides, defaultPreferences);

    // 加载并合并当前存储的偏好设置
-    const mergedPreference = merge({}, this.loadCachedPreferences(), overrides);
+    const mergedPreference = merge(
+      {},
+      this.loadCachedPreferences(),
+      this.initialPreferences,
+    );

    // 更新偏好设置
    this.updatePreferences(mergedPreference);
--- a/packages/@core/shared/design-tokens/src/dark/index.scss
+++ b/packages/@core/shared/design-tokens/src/dark/index.scss
@@ -1,13 +1,8 @@
 :root.dark {
  /* 基础背景颜色颜色 */

-  /* --color-background: 240 6% 18%; */
-  // --color-body: 220deg 13.04% 8%;
-  // --color-body: hsl(240deg 11% 4%);
  --color-background: 220deg 13.04% 8%;

-  /* --color-background: 219 42% 11%; */
-
  /* 基础文本颜色 */
  --color-foreground: 220 13% 91%;

--- a/packages/@core/shared/design-tokens/src/default/index.scss
+++ b/packages/@core/shared/design-tokens/src/default/index.scss
@@ -1,13 +1,6 @@
 /* https://gavin-yyc.github.io/colorconvert/ */
 :root {
-  /* 基础背景颜色颜色 */
-
-  /* --color-background: 210deg 25% 96.86%; */
-  // --color-main: 210deg 25% 96.86%;
  --color-background: 0 0 100%;
-  // --color-darken-background: 220deg 13.04% 8%;
-
-  /* --color-background: 220 14% 95%; */

  /* 基础文本颜色 */
  --color-foreground: 210 6% 21%;
@@ -85,12 +78,9 @@
  /* menu */
  --color-menu-dark: 225deg 12% 13%;
  --color-menu-dark-darken: 223deg 11% 10%;
-  // --color-menu-darken: var(--color-background);
-  // --color-menu-opened-dark: 225deg 12.12% 11%;
  --color-menu: 0deg 0% 100%;
  --color-menu-darken: 0deg 0% 95%;

  accent-color: var(--color-primary);
  color-scheme: light;
-  // --color-menu-opened: 0deg 0% 100%;
 }
--- a/packages/@core/shared/design-tokens/src/index.ts
+++ b/packages/@core/shared/design-tokens/src/index.ts
@@ -1,4 +1,4 @@
-import './default/index.scss';
-import './dark/index.scss';
+import './default/index.css';
+import './dark/index.css';

 export {};
--- a/packages/@core/uikit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/uikit/layout-ui/src/components/layout-sidebar.vue
@@ -296,43 +296,3 @@ function handleMouseleave() {
    </div>
  </aside>
 </template>
-
-<style scoped lang="scss">
-// @include b('sidebar') {
-//   --color-surface: var(--color-menu);
-
-//   @include is('dark') {
-//     --color-surface: var(--color-menu-dark);
-//   }
-
-//   @include e('shadow') {
-//     position: absolute;
-//     top: 0;
-//     z-index: 1;
-//     inline-size: 100%;
-//     block-size: 40px;
-//     height: 50px;
-//     pointer-events: none;
-//     background: linear-gradient(
-//       to bottom,
-//       hsl(var(--color-surface)),
-//       transparent
-//     );
-//     opacity: 0;
-//     transition: opacity 0.15s ease-in-out;
-//     will-change: opacity;
-
-//     &.scrolled {
-//       opacity: 1;
-//     }
-//   }
-
-//   @include is('dark') {
-//     .#{$namespace}-side__extra {
-//       &-content {
-//         border-color: hsl(var(--color-dark-border)) !important;
-//       }
-//     }
-//   }
-// }
-</style>
--- a/packages/@core/uikit/shadcn-ui/src/components/sheet/sheet.vue
+++ b/packages/@core/uikit/shadcn-ui/src/components/sheet/sheet.vue
@@ -68,7 +68,7 @@ function handlerSubmit() {
    <SheetContent :style="contentStyle" class="!w-full pb-12 sm:rounded-l-lg">
      <SheetHeader
        :class="description ? 'h-16' : 'h-12'"
-        class="border-border flex flex-row items-center justify-between border-b pl-5 pr-3"
+        class="border-border flex flex-row items-center justify-between border-b pl-3 pr-3"
      >
        <div class="flex w-full items-center justify-between">
          <div>
--- a/packages/business/common-ui/src/fallback/fallback.vue
+++ b/packages/business/common-ui/src/fallback/fallback.vue
@@ -49,6 +49,9 @@ const titleText = computed(() => {
    case 'offline': {
      return $t('fallback.offline-error');
    }
+    case 'hello': {
+      return $t('fallback.coming-soon');
+    }
    default: {
      return '';
    }
--- a/packages/business/common-ui/src/preferences/preferences.vue
+++ b/packages/business/common-ui/src/preferences/preferences.vue
@@ -125,6 +125,10 @@ const { copy } = useClipboard();

 const tabs = computed((): SegmentedItem[] => {
  return [
+    {
+      label: $t('preferences.general'),
+      value: 'general',
+    },
    {
      label: $t('preferences.appearance'),
      value: 'appearance',
@@ -133,10 +137,7 @@ const tabs = computed((): SegmentedItem[] => {
      label: $t('preferences.layout'),
      value: 'layout',
    },
-    {
-      label: $t('preferences.general'),
-      value: 'general',
-    },
+
    {
      label: $t('preferences.shortcut-keys.title'),
      value: 'shortcutKey',
@@ -171,7 +172,7 @@ function handleReset() {
 </script>

 <template>
-  <div class="z-100 fixed right-0 top-1/3">
+  <div class="z-100 fixed right-0 top-2/3">
    <VbenSheet
      v-model:open="openPreferences"
      :description="$t('preferences.preferences-subtitle')"
@@ -194,8 +195,8 @@ function handleReset() {
        </VbenIconButton>
      </template>

-      <div class="p-5 pt-4">
-        <VbenSegmented :tabs="tabs" default-value="appearance">
+      <div class="p-4 pt-4">
+        <VbenSegmented :tabs="tabs" default-value="general">
          <template #appearance>
            <Block :title="$t('preferences.theme')">
              <Theme
--- a/packages/business/common-ui/src/preferences/trigger.vue
+++ b/packages/business/common-ui/src/preferences/trigger.vue
@@ -12,8 +12,8 @@ defineOptions({
 <template>
  <VbenButton
    :title="$t('preferences.preferences')"
-    class="bg-primary flex-col-center h-9 w-9 cursor-pointer rounded-l-md rounded-r-none border-none"
+    class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none"
  >
-    <IconSetting class="text-lg" />
+    <IconSetting class="duration-3000 animate-spin text-2xl" />
  </VbenButton>
 </template>
--- a/packages/business/layouts/src/iframe/iframe-router-view.vue
+++ b/packages/business/layouts/src/iframe/iframe-router-view.vue
@@ -67,7 +67,6 @@ function showSpinning(index: number) {
 </script>
 <template>
  <template v-if="showIframe">
-    {{ iframeRoutes.length }}
    <template v-for="(item, index) in iframeRoutes" :key="item.fullPath">
      <div
        v-if="canRender(item)"
--- a/packages/constants/src/vben.ts
+++ b/packages/constants/src/vben.ts
@@ -7,5 +7,5 @@ const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
 * @zh_CN Vben Logo
 */
 const VBEN_LOGO =
-  'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/logo-v1.webp';
+  'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.1/source/logo-v1.webp';
 export { VBEN_GITHUB_URL, VBEN_LOGO };
--- a/packages/locales/src/langs/en-US.yaml
+++ b/packages/locales/src/langs/en-US.yaml
@@ -25,6 +25,7 @@ fallback:
  offline: Offline Page
  offline-error: Oops! Network Error
  offline-error-desc: Sorry, can't connect to the internet. Check your connection.
+  coming-soon: Coming soon

 widgets:
  document: Document
--- a/packages/locales/src/langs/zh-CN.yaml
+++ b/packages/locales/src/langs/zh-CN.yaml
@@ -24,6 +24,7 @@ fallback:
  offline: 离线页面
  offline-error: 哎呀！网络错误
  offline-error-desc: 抱歉，无法连接到互联网，请检查您的网络连接并重试。
+  coming-soon: 即将推出

 widgets:
  document: 文档