@pubinfo/core 2.0.0-beta.1

package/src/layout/components/Tools/I18nSelector.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { getUILocales } from '@/locales';
+import { useI18n } from 'vue-i18n';
+import { useContext } from '../../composables/useContext';
+
+// TODO 完成功能
+
+defineOptions({
+  name: 'I18nSelector',
+});
+
+const { locale } = useI18n();
+const route = useRoute();
+
+const { settingsStore, generateI18nTitle } = useContext();
+
+const UILocales = computed(() => getUILocales());
+
+const langItems = computed(() => {
+  return Object.keys(UILocales.value).map((item: string) => {
+    const icons: Record<string, string> = {
+      'en': 'i-circle-flags-en',
+      'zh-cn': 'i-circle-flags-cn',
+      'zh-tw': 'i-circle-flags-cn',
+    };
+    return {
+      icon: icons[item],
+      label: UILocales.value[item].labelName,
+      disabled: settingsStore.settings.app.defaultLang === item,
+      handle: () => setLanguage(item),
+    };
+  });
+});
+
+function setLanguage(name: string) {
+  locale.value = name;
+  settingsStore.setDefaultLang(name);
+
+  if (route.meta.breadcrumbNeste?.at(-1)?.i18n || route.meta.breadcrumbNeste?.at(-1)?.title) {
+    settingsStore.setTitle(generateI18nTitle(route.meta.breadcrumbNeste?.at(-1)?.i18n, route.meta.breadcrumbNeste?.at(-1)?.title));
+  }
+  else {
+    settingsStore.setTitle(generateI18nTitle(route.meta.i18n, route.meta.title));
+  }
+}
+</script>
+
+<template>
+  <HDropdownMenu v-if="settingsStore.settings.toolbar.enableI18n" :items="[langItems]">
+    <slot />
+  </HDropdownMenu>
+</template>

package/src/layout/components/Tools/Notification.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import FluentMail16Filled from '~icons/fluent/mail-16-filled';
+import RiFileEditFill from '~icons/ri/file-edit-fill';
+import RiServiceFill from '~icons/ri/service-fill';
+import TablerMoodSmile from '~icons/tabler/mood-smile';
+
+defineOptions({
+  name: 'Notification',
+});
+
+const activeName = ref('message');
+</script>
+
+<template>
+  <div class="w-xs dark:bg-[var(--g-container-bg)]">
+    <template v-if="activeName === 'message'">
+      <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="list max-h-300px dark:bg-[var(--g-container-bg)]">
+        <div class="item">
+          <div class="item-icon">
+            <FluentMail16Filled />
+          </div>
+
+          <div class="info">
+            <div class="title">
+              你收到了 8 份日报
+            </div>
+            <div class="date">
+              2020-10-10 10:00:00
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-icon service">
+            <RiServiceFill />
+          </div>
+          <div class="info">
+            <div class="title">
+              你收到了 3 位同事的好友申请，请及时处理
+            </div>
+            <div class="date">
+              2020-10-10 10:00:00
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-icon file-edit">
+            <RiFileEditFill />
+          </div>
+          <div class="info">
+            <div class="title">
+              你有 3 份合同待审批
+            </div>
+            <div class="date">
+              2020-10-10 10:00:00
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-icon">
+            <FluentMail16Filled />
+          </div>
+          <div class="info">
+            <div class="title">
+              你收到了 8 份日报
+            </div>
+            <div class="date">
+              2020-10-10 10:00:00
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="item-icon service">
+            <RiServiceFill />
+          </div>
+          <div class="info">
+            <div class="title">
+              你收到了 3 位同事的好友申请，请及时处理
+            </div>
+            <div class="date">
+              2020-10-10 10:00:00
+            </div>
+          </div>
+        </div>
+      </OverlayScrollbarsComponent>
+      <RouterLink v-slot="{ navigate }" :to="{ name: 'Notification' }" custom>
+        <div class="cursor-pointer py-4 text-center text-sm text-stone-5" @click="navigate">
+          进入消息列表
+        </div>
+      </RouterLink>
+    </template>
+    <template v-if="activeName === 'todo'">
+      <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="list max-h-300px">
+        <div class="flex flex-col items-center py-6 text-stone-5">
+          <TablerMoodSmile text="40px" />
+          <p m-2 text-base>
+            没有新待办
+          </p>
+        </div>
+      </OverlayScrollbarsComponent>
+      <RouterLink v-slot="{ navigate }" :to="{ name: 'Notification' }" custom>
+        <div class="cursor-pointer py-4 text-center text-sm text-stone-5" @click="navigate">
+          进入待办列表
+        </div>
+      </RouterLink>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep([data-overlayscrollbars-viewport]) {
+  overscroll-behavior: contain;
+}
+
+.list {
+  --at-apply: border-block-width-1 border-block-solid border-block-stone-2 dark:border-block-stone-7;
+
+  .item {
+    --at-apply: flex items-start gap-3 px-3 py-4 cursor-pointer border-b-width-1 last:border-b-width-0 border-b-solid border-b-stone-2 dark:border-b-stone-7 hover:bg-stone-1 dark:hover:bg-dark/50;
+
+    .item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      --at-apply: w-6 h-6 text-xs rounded-full text-white bg-blue;
+
+      &.service {
+        --at-apply: bg-green;
+      }
+
+      &.file-edit {
+        --at-apply: bg-orange;
+      }
+
+      &.bug {
+        --at-apply: bg-pink;
+      }
+    }
+
+    .info {
+      .title {
+        --at-apply: text-sm line-clamp-2;
+      }
+
+      .date {
+        --at-apply: mt-1 text-xs text-stone-5;
+      }
+    }
+  }
+}
+</style>