@pubinfo-nightly/module-rbac 2025.11.14

package/src/views/theme_setting/index.vue

@@ -0,0 +1,436 @@
+<script setup lang="ts">
+import type { colorScheme, cssVarKey } from 'pubinfo-nightly/client';
+import { message } from 'ant-design-vue';
+import { useTheme } from 'pubinfo-nightly';
+import { getThemes } from 'pubinfo-nightly/client';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+
+interface ThemeListCard {
+  label: string
+  value: colorScheme
+  colors: string[]
+  name?: string
+}
+
+defineOptions({
+  name: 'SettingGlobalThemes',
+});
+const { isDark } = useTheme();
+
+const settingsStore = useSettingsStore();
+
+const modeLabel = computed(() =>
+  settingsStore.globalSettings.app.colorScheme === 'light' ? '亮色模式颜色' : '暗色模式颜色',
+);
+
+const isLight = computed(() => {
+  return settingsStore.globalSettings.app.colorScheme === 'light';
+});
+
+const benchmark: cssVarKey[] = [
+  '--ui-primary',
+  '--ui-text',
+  '--g-bg',
+  '--g-header-bg',
+  '--g-main-sidebar-bg',
+  '--g-sub-sidebar-bg',
+];
+
+const themeList = computed<ThemeListCard[]>(() => {
+  const themes = getThemes();
+  const list = Object.keys(themes)
+    .map((key) => {
+      const value = themes[key];
+      const colors = benchmark.map((cssVar) => {
+        const cssValue = value[cssVar].startsWith('#')
+          ? value[cssVar]
+          : `rgb(${value[cssVar]})`;
+        return cssValue;
+      });
+      const name = themes[key].label;
+      return {
+        label: key,
+        value,
+        colors,
+        name,
+      };
+    })
+    .filter(
+      cssVarScheme =>
+        cssVarScheme.value['color-scheme'] === settingsStore.globalSettings.app.colorScheme,
+    );
+  return list;
+});
+
+function changeTheme(theme: ThemeListCard) {
+  const label = theme.label;
+  const o = {} as any;
+  if (!isLight.value) {
+    settingsStore.globalSettings.app.darkTheme = label;
+    o.darkTheme = label;
+  }
+  else {
+    settingsStore.globalSettings.app.lightTheme = label;
+    o.lightTheme = label;
+  }
+  updateConfig({
+    app: o,
+  });
+}
+
+async function changeMode(checked: boolean | string | number) {
+  const value = !checked ? 'dark' : 'light';
+  settingsStore.globalSettings.app.colorScheme = value;
+  await updateConfig({
+    app: {
+      colorScheme: value,
+    },
+  });
+}
+
+async function updateConfig(options: object) {
+  const jsonStr = JSON.stringify(options);
+  await postSysconfigAddOrEidtSysThemeStyleConfig({ content: jsonStr })
+    .then((res: API.ResponseDataBoolean) => {
+      if (res.success) {
+        message.success('设置成功');
+      }
+    });
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    p-10px
+    pb-0
+  >
+    <div
+      class="w-full h-full bg-white overflow-y-auto p-10px pb-0 flex flex-col box-border dark:bg-[#141414]"
+    >
+      <div
+        class="bg-[#F0F4FF] h-[38px] pl-[16px] flex flex-row items-center b-rd-4px dark:bg-[#32353B]"
+      >
+        <PubinfoIcon name="theme-title" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">颜色主题风格</span>
+      </div>
+      <div class="mt-20px flex flex-row items-center">
+        <div
+          class="flex-none w-[136px] text-right font-400 text-[#4e5969] text-[14px] dark:text-[#C9CDD4]"
+        >
+          亮色/暗色切换
+        </div>
+        <a-switch
+          :checked="isLight"
+          class="ml-16px!"
+          checked-children="亮"
+          un-checked-children="暗"
+          @change="changeMode"
+        />
+      </div>
+      <div class="mt-20px pb-24px flex flex-row">
+        <div
+          class="flex-none w-[136px] text-right font-400 text-[#4e5969] text-[14px] dark:text-[#C9CDD4]"
+        >
+          {{ modeLabel }}
+        </div>
+        <div
+          class="grid grid-cols-3 gap-x-[32px] gap-y-[16px] ml-16px mr-27px w-full max-w-1400px"
+        >
+          <div
+            v-for="(theme, index) in themeList"
+            :key="index"
+            class="theme-item"
+            :class="{
+              active: !isLight
+                ? settingsStore.globalSettings.app.darkTheme === theme.label
+                : settingsStore.globalSettings.app.lightTheme === theme.label,
+              dark: isDark,
+            }"
+            aspect="[4/3]"
+            @click="changeTheme(theme)"
+          >
+            <p class="item-title">
+              <span
+                class="text-[#4e5969] text-[14px] dark:text-[#C9CDD4]"
+              >
+                {{
+                  theme.name
+                }}
+              </span>
+              <PubinfoIcon
+                v-if="!isLight
+                  ? settingsStore.globalSettings.app.darkTheme === theme.label
+                  : settingsStore.globalSettings.app.lightTheme === theme.label"
+                name="theme-check-mark"
+                class="text-base ml-[6px] text-#fff position-relative top--1px"
+                :size="20"
+              />
+            </p>
+            <div class="item-content">
+              <div
+                flex
+                items-center
+                justify-center
+                class="spots-wrap"
+              >
+                <!-- colors 颜色会有重复使用的地方，key多段拼接 -->
+                <template
+                  v-for="(color, _index) in theme.colors"
+                  :key="theme.name + color + _index"
+                >
+                  <div class="color-spot" :style="{ backgroundColor: color }" />
+                </template>
+              </div>
+              <div class="skeleton">
+                <header :style="{ backgroundColor: theme.colors[0] }">
+                  <div class="dot" />
+                  <div class="bar" />
+                </header>
+                <main class="skeleton-body">
+                  <div class="aside">
+                    <div class="side-line" :style="{ backgroundColor: theme.colors[0] }" />
+                    <div v-for="i in 4" :key="i" class="side-line" />
+                  </div>
+                  <div class="main">
+                    <div class="left">
+                      <div v-for="i in 3" :key="i" class="left-item">
+                        <div class="dot" />
+                        <div class="lines-wrap">
+                          <div class="line1" />
+                          <div class="line2" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="right">
+                      <div class="right-item" />
+                      <div class="right-item" />
+                      <div class="right-item" :style="{ backgroundColor: theme.colors[0], opacity: 0.3 }" />
+                      <div class="right-item" />
+                    </div>
+                  </div>
+                </main>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.theme-item {
+  --at-apply: flex flex-col cursor-pointer border border-[color:var(--border-2,#e5e6eb)] pt-3 pb-0 px-6 rounded-lg border-solid;
+  background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
+}
+
+.theme-item.active {
+  --at-apply: border-[rgb(var(--ui-primary))] shadow-[0_2.6px_13px_0_#59626940] border-[2.6px] border-solid;
+  background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
+}
+
+.theme-item.dark {
+  --at-apply: border-transparent;
+  background: linear-gradient(0deg, #3a3e43 0%, #3a3e43 100%), linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
+}
+
+.theme-item.dark.active {
+  border-color: rgb(var(--ui-primary));
+}
+
+.theme-item .item-title {
+  --at-apply: flex items-center justify-center text-sm leading-[22px] text-center m-0 p-0;
+}
+
+.theme-item .item-content {
+  --at-apply: flex flex-1 flex-col;
+  padding: calc(12 / 320 * 100%) calc(20 / 320 * 100%);
+  margin-top: calc(12 / 320 * 100%);
+  background: linear-gradient(180deg, #fff 0%, #fff0 100%);
+  border-radius: calc(8 / 320 * 100%);
+}
+
+.theme-item.dark .item-content {
+  background: linear-gradient(180deg, #ffffff1a 0%, #fff0 100%);
+}
+
+.theme-item .item-content .spots-wrap {
+  margin-left: calc(32 / 270 / 2 * 100%);
+}
+
+.theme-item .item-content .color-spot {
+  --at-apply: shrink-0 max-w-[30px] aspect-[1] rounded-[30px] border-2 border-solid border-white;
+  background: #fff;
+  width: calc(30 / 270 * 100%);
+  box-shadow: 0 0 4px 0 #00000026;
+}
+
+.theme-item .item-content .color-spot:nth-child(1) {
+  transform: translateX(0);
+}
+
+.theme-item .item-content .color-spot:nth-child(2) {
+  transform: translateX(calc(-6 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(3) {
+  transform: translateX(calc(-12 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(4) {
+  transform: translateX(calc(-18 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(5) {
+  transform: translateX(calc(-24 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(6) {
+  transform: translateX(calc(-30 / 30 * 100%));
+}
+
+.theme-item .item-content .skeleton {
+  --at-apply: flex flex-[auto] flex-col h-0 rounded mt-[22px];
+  background: #f5f8fe;
+}
+
+.theme-item.dark .item-content .skeleton {
+  background: #111213;
+}
+
+.theme-item .item-content .skeleton header {
+  --at-apply: flex items-center aspect-[10.45] pl-2.5 rounded-[4px_4px_0_0];
+}
+
+.theme-item.dark .item-content .skeleton header {
+  background: #26272a !important;
+}
+
+.theme-item .item-content .skeleton header .dot {
+  --at-apply: aspect-1 rounded-1/2;
+  width: calc(8.5 / 230 * 100%);
+  margin-right: calc(5 / 230 * 100%);
+  background: rgb(255 255 255 / 50%);
+}
+
+.theme-item.dark .item-content .skeleton header .dot {
+  background: rgb(255 255 255 / 20%);
+}
+
+.theme-item .item-content .skeleton header .bar {
+  --at-apply: rounded-sm;
+  width: calc(68 / 230 * 100%);
+  aspect-ratio: calc(68 / 7);
+  background: rgb(255 255 255 / 50%);
+}
+
+.theme-item.dark .item-content .skeleton header .bar {
+  background: rgb(255 255 255 / 20%);
+}
+
+.theme-item .item-content .skeleton .skeleton-body {
+  --at-apply: flex flex-1 h-0;
+  padding: calc(7 / 230 * 100%);
+}
+
+.theme-item .item-content .skeleton .skeleton-body .aside {
+  --at-apply: h-full rounded;
+  width: calc(36 / 230 * 100%);
+  padding-top: calc(12 / 230 * 100%);
+  margin-right: calc(7 / 230 * 100%);
+  background: #fff;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .aside {
+  background: #25282d;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .aside .side-line {
+  --at-apply: rounded-sm;
+  width: calc(24.1 / 36.6 * 100%);
+  aspect-ratio: calc(24.1 / 6.5);
+  margin: 0 auto calc(4 / 36.6 * 100%);
+  background: #eaeff7;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .aside .side-line {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main {
+  --at-apply: flex flex-[auto] justify-between h-full pt-[5.2%] pb-[3%] px-[5.6%] rounded-sm;
+  background: #fff;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main {
+  background: #25282d;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left {
+  --at-apply: flex-1;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .right {
+  --at-apply: w-3/10;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item {
+  --at-apply: flex mb-[6.5];
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .dot {
+  width: calc(calc(15 / 108) * 100%);
+  aspect-ratio: 1;
+  margin-right: calc(calc(7.4 / 108) * 100%);
+  margin-bottom: calc(calc(6.7 / 108) * 100%);
+  background: #eaeff7;
+  border-radius: 50%;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .left-item .dot {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .lines-wrap {
+  flex: 1;
+  padding-top: calc(calc(2 / 108) * 100%);
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .line1 {
+  width: calc(calc(53.4 / 82) * 100%);
+  aspect-ratio: calc(53.4 / 3.4);
+  background: #eaeff7;
+  border-radius: 1px;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .left-item .line1 {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .line2 {
+  width: calc(calc(25.4 / 82) * 100%);
+  aspect-ratio: calc(25.4 / 3.4);
+  margin-top: 5px;
+  background: #eaeff7;
+  border-radius: 1px;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .left-item .line2 {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .right-item {
+  width: 100%;
+  aspect-ratio: calc(44 / 8.8);
+  margin-bottom: calc(10.14 / 44 * 100%);
+  background: #eaeff7;
+  border-radius: calc(1.1 / 44 * 100%);
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .right-item {
+  background: #32353b;
+}
+</style>

package/src/views/toolbar_setting/animationData.ts

@@ -0,0 +1,38 @@
+import darkEnableColorSchemeData from '@/assets/lottie/toolbar/dark/enableColorScheme.json?url';
+import darkEnableFullscreenData from '@/assets/lottie/toolbar/dark/enableFullscreen.json?url';
+import darkEnableNotificationData from '@/assets/lottie/toolbar/dark/enableNotification.json?url';
+import darkEnablePageReloadData from '@/assets/lottie/toolbar/dark/enablePageReload.json?url';
+import darkEnableUserPreferencesData from '@/assets/lottie/toolbar/dark/enableUserPreferences.json?url';
+
+import darkNavSearchEnableData from '@/assets/lottie/toolbar/dark/navSearchEnable.json?url';
+import darkNavSearchEnableHotkeysData from '@/assets/lottie/toolbar/dark/navSearchEnableHotkeys.json?url';
+
+import lightEnableColorSchemeData from '@/assets/lottie/toolbar/light/enableColorScheme.json?url';
+import lightEnableFullscreenData from '@/assets/lottie/toolbar/light/enableFullscreen.json?url';
+
+import lightEnableNotificationData from '@/assets/lottie/toolbar/light/enableNotification.json?url';
+
+import lightEnablePageReloadData from '@/assets/lottie/toolbar/light/enablePageReload.json?url';
+import lightEnableUserPreferencesData from '@/assets/lottie/toolbar/light/enableUserPreferences.json?url';
+
+import lightNavSearchEnableData from '@/assets/lottie/toolbar/light/navSearchEnable.json?url';
+import lightNavSearchEnableHotkeysData from '@/assets/lottie/toolbar/light/navSearchEnableHotkeys.json?url';
+
+export {
+  darkEnableColorSchemeData,
+  darkEnableFullscreenData,
+  darkEnableNotificationData,
+  darkEnablePageReloadData,
+  darkEnableUserPreferencesData,
+
+  darkNavSearchEnableData,
+  darkNavSearchEnableHotkeysData,
+  lightEnableColorSchemeData,
+  lightEnableFullscreenData,
+  lightEnableNotificationData,
+
+  lightEnablePageReloadData,
+  lightEnableUserPreferencesData,
+  lightNavSearchEnableData,
+  lightNavSearchEnableHotkeysData,
+};

package/src/views/toolbar_setting/index.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+
+import { useSettingsStore } from '@/stores';
+import SetItem from '../components/setItem.vue';
+import {
+  darkEnableColorSchemeData,
+  darkEnableFullscreenData,
+  darkEnableNotificationData,
+  darkEnablePageReloadData,
+  darkEnableUserPreferencesData,
+
+  darkNavSearchEnableData,
+  darkNavSearchEnableHotkeysData,
+  lightEnableColorSchemeData,
+  lightEnableFullscreenData,
+  lightEnableNotificationData,
+
+  lightEnablePageReloadData,
+  lightEnableUserPreferencesData,
+  lightNavSearchEnableData,
+  lightNavSearchEnableHotkeysData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'ToolbarSetting',
+});
+
+const settingsStore = useSettingsStore();
+
+const toolbarList = reactive([
+  {
+    name: '通知中心',
+    type: 'switch',
+    descripe: '该功能具体业务功能需自行开发，框架仅提供示例模版',
+    open: settingsStore.globalSettings.toolbar.enableNotification,
+    parentName: 'toolbar',
+    childName: 'enableNotification',
+    activeStyle: '',
+    lightData: lightEnableNotificationData,
+    darkData: darkEnableNotificationData,
+  },
+  {
+    name: '全屏',
+    type: 'switch',
+    descripe: '',
+    parentName: 'toolbar',
+    childName: 'enableFullscreen',
+    open: settingsStore.globalSettings.toolbar.enableFullscreen,
+    activeStyle: '',
+    lightData: lightEnableFullscreenData,
+    darkData: darkEnableFullscreenData,
+  },
+  {
+    name: '页面刷新',
+    type: 'switch',
+    descripe: '使用框架内提供的刷新功能进行页面刷新',
+    parentName: 'toolbar',
+    childName: 'enablePageReload',
+    open: settingsStore.globalSettings.toolbar.enablePageReload,
+    activeStyle: '',
+    lightData: lightEnablePageReloadData,
+    darkData: darkEnablePageReloadData,
+  },
+  {
+    name: '暗黑主题切换',
+    type: 'switch',
+    descripe: '开启后可在明亮/暗黑模式中切换',
+    parentName: 'toolbar',
+    childName: 'enableColorScheme',
+    open: settingsStore.globalSettings.toolbar.enableColorScheme,
+    activeStyle: '',
+    lightData: lightEnableColorSchemeData,
+    darkData: darkEnableColorSchemeData,
+  },
+  {
+    name: '个性偏好设置',
+    type: 'switch',
+    descripe: '',
+    parentName: 'app',
+    childName: 'enableUserPreferences',
+    open: settingsStore.globalSettings.app.enableUserPreferences,
+    activeStyle: '',
+    lightData: lightEnableUserPreferencesData,
+    darkData: darkEnableUserPreferencesData,
+  },
+  {
+    name: '导航搜索',
+    type: 'switch',
+    descripe: '',
+    parentName: 'navSearch',
+    childName: 'enable',
+    open: settingsStore.globalSettings.navSearch.enable,
+    activeStyle: '',
+    lightData: lightNavSearchEnableData,
+    darkData: darkNavSearchEnableData,
+  },
+  {
+    name: '导航搜索快捷键',
+    type: 'switch',
+    descripe: '',
+    parentName: 'navSearch',
+    childName: 'enableHotkeys',
+    open: settingsStore.globalSettings.navSearch.enableHotkeys,
+    activeStyle: '',
+    lightData: lightNavSearchEnableHotkeysData,
+    darkData: darkNavSearchEnableHotkeysData,
+  },
+] as const);
+
+type SettingsKeys = keyof Required<Settings.all>;
+
+function onChange<K extends SettingsKeys, V extends keyof Required<Settings.all>[K]>(
+  parentName: K,
+  childName: V,
+  ck: Required<Settings.all>[K][V],
+) {
+  if (settingsStore.globalSettings[parentName]
+    && settingsStore.globalSettings[parentName][childName] !== undefined) {
+    (settingsStore.globalSettings as Required<Settings.all>)[parentName][childName] = ck;
+
+    const result: Settings.all = {};
+    result[parentName] = {};
+    // @ts-expect-error always true
+    result[parentName][childName] = ck;
+
+    const jsonStr = JSON.stringify(result);
+    setStyle(jsonStr);
+  }
+}
+
+function setStyle(jsonStr: string) {
+  postSysconfigAddOrEidtSysThemeStyleConfig({ content: jsonStr }).then((res: API.ResponseDataBoolean) => {
+    if (res.success) {
+      message.success('设置成功');
+    }
+  });
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    p-10px
+  >
+    <div class="w-full h-full bg-white overflow-y-auto p-10px pb-30px flex flex-col box-border dark:bg-[#141414]">
+      <div class="h-[38px] pl-[16px] flex flex-row items-center bar-header">
+        <PubinfoIcon name="icon_toolbar" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">工具栏</span>
+      </div>
+      <div class="mt-[22px] grid grid-cols-3 gap-x-[20px] px-30px w-full h-0 max-w-1500px" aspect="[3/2] ">
+        <SetItem
+          v-for="item in toolbarList"
+          :key="item.name"
+          class="mb-20px"
+          aspect="[9/6]"
+          :name="item.name"
+          :descripe="item.descripe"
+          :open="item.open"
+          :type="item.type"
+          :light-animation-data="item.lightData"
+          :dark-animation-data="item.darkData"
+          @change="(val) => onChange<any, any>(item.parentName, item.childName, val)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bar-header {
+  background: var(--g-bg);
+}
+</style>