@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/other_setting/index.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { Form, SettingsKeys } from './interface.ts';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+import { message } from 'ant-design-vue';
+
+import SetItem from '../components/setItem.vue';
+import {
+  darkEnableCopyrightData,
+  darkEnableHotkeysData,
+  darkSwitchTabbarAndToolbarData,
+  lightEnableCopyrightData,
+  lightEnableHotkeysData,
+  lightSwitchTabbarAndToolbarData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'OtherSetting',
+});
+
+const settingsStore = useSettingsStore();
+
+const activeKey = ref<string[]>(['0', '1', '2']);
+const otherList = reactive([
+  {
+    tabName: '底部版权',
+    tabIcon: 'icon_copyright',
+    list: [{
+      name: '是否启用',
+      type: 'switch',
+      descripe: '',
+      parentName: 'copyright',
+      childName: 'enable',
+      open: settingsStore.globalSettings.copyright.enable,
+      activeStyle: '',
+      lightData: lightEnableCopyrightData,
+      darkData: darkEnableCopyrightData,
+    }],
+  },
+  {
+    tabName: '页面',
+    tabIcon: 'icon_mainpage',
+    list: [
+      {
+        name: '是否启用快捷键',
+        type: 'switch',
+        descripe: '',
+        parentName: 'mainPage',
+        childName: 'enableHotkeys',
+        open: settingsStore.globalSettings.mainPage.enableHotkeys,
+        activeStyle: '',
+        lightData: lightEnableHotkeysData,
+        darkData: darkEnableHotkeysData,
+      },
+    ],
+  },
+  {
+    tabName: '顶栏',
+    tabIcon: 'icon_topbar',
+    list: [
+      {
+        name: '展示切换',
+        type: 'switch',
+        descripe: '切换标签栏和工具栏的展示顺序',
+        parentName: 'topbar',
+        childName: 'switchTabbarAndToolbar',
+        open: settingsStore.globalSettings.topbar.switchTabbarAndToolbar,
+        activeStyle: '',
+        lightData: lightSwitchTabbarAndToolbarData,
+        darkData: darkSwitchTabbarAndToolbarData,
+      },
+    ],
+  },
+] as const);
+
+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('设置成功');
+    }
+  });
+}
+
+const copyrightForm = ref<Form>({
+  dates: settingsStore.globalSettings.copyright.dates,
+  company: settingsStore.globalSettings.copyright.company,
+  website: settingsStore.globalSettings.copyright.website,
+  beian: settingsStore.globalSettings.copyright.beian,
+});
+
+function onSubmit() {
+  const jsonStr = JSON.stringify({
+    copyright: {
+      dates: copyrightForm.value.dates,
+      company: copyrightForm.value.company,
+      website: copyrightForm.value.website,
+      beian: copyrightForm.value.beian,
+    },
+  });
+  settingsStore.globalSettings.copyright.dates = copyrightForm.value.dates;
+  settingsStore.globalSettings.copyright.company = copyrightForm.value.company;
+  settingsStore.globalSettings.copyright.website = copyrightForm.value.website;
+  settingsStore.globalSettings.copyright.beian = copyrightForm.value.beian;
+
+  setStyle(jsonStr);
+}
+
+function onReset() {
+  copyrightForm.value = {
+    dates: settingsStore.globalSettings.copyright.dates,
+    company: settingsStore.globalSettings.copyright.company,
+    website: settingsStore.globalSettings.copyright.website,
+    beian: settingsStore.globalSettings.copyright.beian,
+  };
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    p-10px
+  >
+    <div class="w-full h-full bg-white overflow-y-auto p-10px flex flex-col box-border dark:bg-[#141414]">
+      <a-collapse
+        v-model:active-key="activeKey"
+        :bordered="false"
+        :ghost="true"
+        expand-icon-position="end"
+      >
+        <template #expandIcon="pros">
+          <div class="w-16px h-16px bg-[#fff] rounded-16px flex items-center justify-center">
+            <PubinfoIcon
+              name="icon_jt"
+              class="text-base"
+              :rotate="pros?.isActive ? 0 : 180"
+              :size="16"
+              @click="console.log('pros', pros)"
+            />
+          </div>
+        </template>
+        <a-collapse-panel v-for="(option, index) in otherList" :key="index" style="margin-bottom: 10px;">
+          <template #header>
+            <div class="flex flex-row items-center">
+              <PubinfoIcon :name="option.tabIcon" class="text-base mr-[6px]" :size="22" />
+              <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">{{ option.tabName }}</span>
+            </div>
+          </template>
+          <div v-if="option.tabName !== '底部版权'" class="grid grid-cols-3 gap-[20px] px-30px w-full max-w-1300px">
+            <SetItem
+              v-for="item in option.list"
+              :key="item.name"
+              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<typeof item.parentName, typeof item.childName>(item.parentName, item.childName, val)"
+            />
+          </div>
+          <div v-else>
+            <div v-for="item in option.list" :key="item.name" class="grid grid-cols-3 gap-[20px] px-30px w-full max-w-1300px">
+              <SetItem
+                :key="item.name"
+                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<typeof item.parentName, typeof item.childName>(item.parentName, item.childName, val)"
+              />
+              <div class="grid-col-span-2 pt-40px">
+                <div class="flex items-center mb-20px w-560px">
+                  <label class="w-130px text-right mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">日期</label>
+                  <a-input
+                    v-model:value="copyrightForm.dates"
+                    class="flex-1"
+                  />
+                </div>
+                <div class="flex items-center mb-20px w-560px">
+                  <label class="w-130px text-right mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">公司</label>
+                  <a-input
+                    v-model:value="copyrightForm.company"
+                    class="flex-1"
+                  />
+                </div>
+                <div class="flex items-center mb-20px w-560px">
+                  <label class="w-130px text-right mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">网址</label>
+                  <a-input
+                    v-model:value="copyrightForm.website"
+                    class="flex-1"
+                  />
+                </div>
+                <div class="flex items-center mb-20px w-560px">
+                  <label class="w-130px text-right mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">备案</label>
+                  <a-input
+                    v-model:value="copyrightForm.beian"
+                    class="flex-1"
+                  />
+                </div>
+                <div class="flex items-center flex-row-reverse w-560px">
+                  <a-button style="margin-left: 10px;" @click="onReset">
+                    重置
+                  </a-button>
+                  <a-button type="primary" @click="onSubmit">
+                    确定
+                  </a-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-collapse-header) {
+  padding: 6.5px 16px !important;
+  background: var(--g-bg);
+}
+
+.bar-header {
+  background: var(--g-bg);
+}
+</style>

package/src/views/other_setting/interface.ts

@@ -0,0 +1,26 @@
+import type { SimplifyDeep } from 'type-fest';
+
+export type SettingsKeys = keyof Required<Settings.all>;
+
+type CombinedKeys = {
+  [K in SettingsKeys]: keyof SimplifyDeep<Required<Settings.all>[K]>;
+}[SettingsKeys];
+
+export interface Item {
+  name: string
+  descripe: string
+  type: string
+  parentName: SettingsKeys
+  childName: CombinedKeys
+  open: boolean
+  activeStyle: string
+  lightData: string
+  darkData: string
+}
+
+export interface Form {
+  dates: string
+  company: string
+  website: string
+  beian: string
+}

package/src/views/page_animation_setting/animationData.ts

@@ -0,0 +1,23 @@
+import darkFadeInOutData from '@/assets/lottie/page_animation/dark/fadeinout.json?url';
+import darkToBottomData from '@/assets/lottie/page_animation/dark/tobottom.json?url';
+import darkToLeftData from '@/assets/lottie/page_animation/dark/toleft.json?url';
+import darkToRightData from '@/assets/lottie/page_animation/dark/toright.json?url';
+import darkToTopData from '@/assets/lottie/page_animation/dark/totop.json?url';
+import lightFadeInOutData from '@/assets/lottie/page_animation/light/fadeinout.json?url';
+import lightToBottomData from '@/assets/lottie/page_animation/light/tobottom.json?url';
+import lightToLeftData from '@/assets/lottie/page_animation/light/toleft.json?url';
+import lightToRightData from '@/assets/lottie/page_animation/light/toright.json?url';
+import lightToTopData from '@/assets/lottie/page_animation/light/totop.json?url';
+
+export {
+  darkFadeInOutData,
+  darkToBottomData,
+  darkToLeftData,
+  darkToRightData,
+  darkToTopData,
+  lightFadeInOutData,
+  lightToBottomData,
+  lightToLeftData,
+  lightToRightData,
+  lightToTopData,
+};

package/src/views/page_animation_setting/index.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+import { message } from 'ant-design-vue';
+import AnimationItem from '../components/animation_item.vue';
+import {
+  darkFadeInOutData,
+  darkToBottomData,
+  darkToLeftData,
+  darkToRightData,
+  darkToTopData,
+  lightFadeInOutData,
+  lightToBottomData,
+  lightToLeftData,
+  lightToRightData,
+  lightToTopData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'PageAnimationSetting',
+});
+
+const settingsStore = useSettingsStore();
+
+const { enableTransition, transitionMode } = toRefs(settingsStore.globalSettings.mainPage);
+
+const itemRefs = ref<(InstanceType<typeof AnimationItem> | null)[]>([]);
+
+const transitionModeList = reactive<
+  {
+    descripe: string
+    active: Settings.mainPage['transitionMode']
+    class: string
+    lightData: string
+    darkData: string
+  }[]
+>([
+  {
+    descripe: '淡入淡出',
+    active: 'fade',
+    class: 'mode-fade',
+    lightData: lightFadeInOutData,
+    darkData: darkFadeInOutData,
+  },
+  {
+    descripe: '向左滑动',
+    active: 'slide-left',
+    class: 'mode-slide-left',
+    lightData: lightToLeftData,
+    darkData: darkToLeftData,
+  },
+  {
+    descripe: '向右滑动',
+    active: 'slide-right',
+    class: 'mode-slide-right',
+    lightData: lightToRightData,
+    darkData: darkToRightData,
+  },
+  {
+    descripe: '向上滑动',
+    active: 'slide-top',
+    class: 'mode-slide-top',
+    lightData: lightToTopData,
+    darkData: darkToTopData,
+  },
+  {
+    descripe: '向下滑动',
+    active: 'slide-bottom',
+    class: 'mode-slide-bottom',
+    lightData: lightToBottomData,
+    darkData: darkToBottomData,
+  },
+]);
+
+function play(index: number) {
+  if (itemRefs.value[index]) {
+    itemRefs.value[index]?.play();
+  }
+}
+
+function stop(index: number) {
+  if (itemRefs.value[index]) {
+    itemRefs.value[index]?.stop();
+  }
+}
+
+const enableTran = ref<boolean>(enableTransition.value);
+
+function onChange(ck: boolean | string | number) {
+  settingsStore.globalSettings.mainPage.enableTransition = ck as boolean;
+  const jsonStr = JSON.stringify({
+    mainPage: {
+      enableTransition: ck,
+    },
+  });
+  setStyle(jsonStr);
+}
+
+function clickHandle(item: any) {
+  if (item) {
+    transitionMode.value = item;
+    settingsStore.globalSettings.mainPage.transitionMode = item;
+    const jsonStr = JSON.stringify({
+      mainPage: {
+        transitionMode: item,
+      },
+    });
+    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 flex flex-col box-border dark:bg-[#141414]">
+      <div class="bg-[#F0F4FF] h-[38px] pl-[16px] flex flex-row items-center dark:bg-[#32353B]">
+        <PubinfoIcon name="icon_menu" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">页面切换动画</span>
+      </div>
+      <div class="mt-[15px] flex-1 flex flex-col">
+        <div class="flex flex-row items-center">
+          <div class="w-[110px] text-right font-400 text-[#4e5969] text-[14px] dark:text-[#C9CDD4]">
+            开启动画效果
+          </div>
+          <a-switch
+            v-model:checked="enableTran"
+            class="ml-30px"
+            checked-children="开启"
+            un-checked-children="关闭"
+            @change="onChange"
+          />
+        </div>
+        <div class="mt-[15px] flex-1 flex flex-row">
+          <div class="flex-none w-[110px] text-right font-400 text-[#4e5969] text-[14px] pt-10px dark:text-[#C9CDD4]">
+            动画模式
+          </div>
+          <div class="flex-auto grid grid-cols-3 gap-[20px] px-30px w-full h-0 max-w-1500px" aspect="[3/2]">
+            <div
+              v-for="(mode, index) in transitionModeList"
+              :key="mode.active"
+              class="item dark:bg-[#3a3e43]! "
+              :class="[transitionMode === mode.active ? 'active' : '', `item-${mode.active}`]"
+              aspect="[9/6]"
+              @click="clickHandle(mode.active)"
+              @mouseenter="play(index)"
+              @mouseleave="stop(index)"
+            >
+              <div class="text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">
+                {{ mode.descripe }}
+              </div>
+              <div class="flex-1 mt-[20px] w-[75%] rounded-[8px] jb py-[10px] flex justify-center">
+                <AnimationItem
+                  :key="index"
+                  :ref="(el: any) => (itemRefs[index] = el as InstanceType<typeof AnimationItem>)"
+                  :light-animation-data="mode.lightData"
+                  :dark-animation-data="mode.darkData"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  display: flex;
+  flex-direction: column;
+  place-items: center center;
+  padding-top: 26px;
+  cursor: pointer;
+  background-color: var(--g-bg);
+  border: 1px solid var(--g-tabbar-tab-hover-bg);
+  border-radius: 8px;
+
+  .jb {
+    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+  }
+
+  &.active {
+    border: 2.6px solid rgb(var(--ui-primary));
+    border-radius: 8px;
+    box-shadow: 0 2.6px 13px 0 #59626940;
+  }
+}
+</style>