修改logo和标题,主题颜色,添加pinia持久化插件

3 years ago · 30acdcd433
parent 4c2c7980d6
commit 30acdcd433
12 changed files with 133 additions and 41 deletions
--- a/.env.development
+++ b/.env.development
@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = RuoYi-Vue-Plus后台管理系统
+VITE_APP_TITLE = 后台管理系统

 # 开发环境配置
 VITE_APP_ENV = 'development'
--- a/index.html
+++ b/index.html
@ -7,7 +7,7 @@
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="/favicon.ico">
-  <title>RuoYi-Vue-Plus管理系统</title>
+  <title></title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  <style>
    html,
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "jsencrypt": "3.3.1",
    "nprogress": "0.2.0",
    "pinia": "2.0.22",
+    "pinia-plugin-persist": "^1.0.0",
    "vue": "3.2.45",
    "vue-cropper": "1.0.3",
    "vue-router": "4.1.4"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -15,6 +15,7 @@ specifiers:
  jsencrypt: 3.3.1
  nprogress: 0.2.0
  pinia: 2.0.22
+  pinia-plugin-persist: ^1.0.0
  sass: 1.56.1
  unplugin-auto-import: 0.11.4
  vite: 3.2.3
@ -38,6 +39,7 @@ dependencies:
  jsencrypt: registry.npmmirror.com/jsencrypt/3.3.1
  nprogress: registry.npmmirror.com/nprogress/0.2.0
  pinia: registry.npmmirror.com/pinia/2.0.22_vue@3.2.45
+  pinia-plugin-persist: registry.npmmirror.com/pinia-plugin-persist/1.0.0_pinia@2.0.22+vue@3.2.45
  vue: registry.npmmirror.com/vue/3.2.45
  vue-cropper: registry.npmmirror.com/vue-cropper/1.0.3
  vue-router: registry.npmmirror.com/vue-router/4.1.4_vue@3.2.45
@ -2274,6 +2276,24 @@ packages:
    engines: {node: '>=8.6'}
    dev: true

+  registry.npmmirror.com/pinia-plugin-persist/1.0.0_pinia@2.0.22+vue@3.2.45:
+    resolution: {integrity: sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pinia-plugin-persist/-/pinia-plugin-persist-1.0.0.tgz}
+    id: registry.npmmirror.com/pinia-plugin-persist/1.0.0
+    name: pinia-plugin-persist
+    version: 1.0.0
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0
+      pinia: ^2.0.0
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      pinia: registry.npmmirror.com/pinia/2.0.22_vue@3.2.45
+      vue: registry.npmmirror.com/vue/3.2.45
+      vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.45
+    dev: false
+
  registry.npmmirror.com/pinia/2.0.22_vue@3.2.45:
    resolution: {integrity: sha512-u+b8/BC+tmvo3ACbYO2w5NfxHWFOjvvw9DQnyT0dW8aUMCPRQT5QnfZ5R5W2MzZBMTeZRMQI7V/QFbafmM9QHw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pinia/-/pinia-2.0.22.tgz}
    id: registry.npmmirror.com/pinia/2.0.22
@ -3077,6 +3097,24 @@ packages:
    version: 1.0.3
    dev: false

+  registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.45:
+    resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.5.tgz}
+    id: registry.npmmirror.com/vue-demi/0.12.5
+    name: vue-demi
+    version: 0.12.5
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: registry.npmmirror.com/vue/3.2.45
+    dev: false
+
  registry.npmmirror.com/vue-demi/0.14.0_vue@3.2.45:
    resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.0.tgz}
    id: registry.npmmirror.com/vue-demi/0.14.0
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@ -1,6 +1,6 @@
 // base color
-$blue: #324157;
-$light-blue: #3A71A8;
+$blue: #153859;
+$light-blue: #1c4c7a;
 $red: #C03639;
 $pink: #E65D6E;
 $green: #30B08F;
@ -11,14 +11,14 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color: #bfcbd9;
 $base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
+$base-menu-background: #143657;
 $base-logo-title-color: #ffffff;

 $base-menu-light-color: rgba(0, 0, 0, 0.7);
 $base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;

-$base-sub-menu-background: #1f2d3d;
+$base-sub-menu-background: #102b45;
 $base-sub-menu-hover: #001528;

 // 自定义暗色菜单风格
@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */

-$--color-primary: #409EFF;
+$--color-primary: #1c4c7a;
 $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -15,7 +15,7 @@

 <script setup>
 import variables from '@/assets/styles/variables.module.scss'
-import logo from '@/assets/logo/logo.png'
+
 import useSettingsStore from '@/store/modules/settings'

 defineProps({
@ -25,7 +25,8 @@ defineProps({
  }
 })

-const title = ref('RuoYi-Vue-Plus');
+const logo =ref("./logo.png");
+const title = import.meta.env.VITE_APP_TITLE;
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
 </script>
--- a/src/settings.js
+++ b/src/settings.js
@ -25,7 +25,7 @@ export default {
  /**
   * 是否固定头部
   */
-  fixedHeader: false,
+  fixedHeader: true,

  /**
   * 是否显示logo
@ -35,7 +35,7 @@ export default {
  /**
   * 是否显示动态标题
   */
-  dynamicTitle: false,
+  dynamicTitle: true,

  /**
   * @type {string | array} 'production' | ['production', 'development']
--- a/src/store/index.js
+++ b/src/store/index.js
@ -1,5 +1,15 @@
+import useAppStore from './modules/app';
+import useDictStore from './modules/dict';
+import usePermissionStore from './modules/permission';
+import useSettingsStore from './modules/settings';
+import useTagsViewStore from './modules/tagsView';
+import useUserStore from './modules/user';
+import piniaPluginPersist from 'pinia-plugin-persist'
+
 const store = createPinia()
+store.use(piniaPluginPersist)
+
+export { store, useAppStore, useDictStore, usePermissionStore, useSettingsStore, useTagsViewStore, useUserStore }

-export { store }
-export * as useAppStore from './modules/app';
-export * as useDictStore from './modules/dict';
+export { useLocalStore } from './modules/local'
+export { useSessionStore } from './modules/session'
--- a/src/store/modules/local.js
+++ b/src/store/modules/local.js
@ -0,0 +1,29 @@
+
+/**
+ * 通用数据仓库
+ */
+export const useLocalStore = defineStore('localStore', {
+  state: () => {
+    return {
+      test: undefined
+    }
+  },
+  //计算字段
+  getters: {
+
+  },
+  //方法
+  actions: {
+
+  },
+  persist: {
+    enabled: true, // 开启缓存  默认会存储在本地localStorage
+    strategies: [
+      {
+        key: 'localStore',
+        storage: localStorage,
+      },
+    ]
+  }
+
+})
--- a/src/store/modules/session.js
+++ b/src/store/modules/session.js
@ -0,0 +1,29 @@
+
+/**
+ * 通用数据仓库
+ */
+export const useSessionStore = defineStore('sessionStore', {
+  state: () => {
+    return {
+      test: undefined
+    }
+  },
+  //计算字段
+  getters: {
+
+  },
+  //方法
+  actions: {
+
+  },
+  persist: {
+    enabled: true, // 开启缓存  默认会存储在本地localStorage
+    strategies: [
+      {
+        key: 'sessionStore',
+        storage: sessionStorage,
+      },
+    ]
+  }
+
+})
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -2,7 +2,7 @@
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>RuoYi-Vue-Plus后台管理系统</h2>
+        <h2>后台管理系统</h2>
        <p>
          RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
          <br/>
@ -36,32 +36,6 @@
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
-        <p>
-          <el-tag type="danger">&yen;免费开源</el-tag>
-        </p>
-        <p>
-          <el-button
-            type="primary"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus')"
-            >访问码云</el-button
-          >
-          <el-button
-            type="primary"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://github.com/JavaLionLi/RuoYi-Vue-Plus')"
-            >访问GitHub</el-button
-          >
-          <el-button
-            type="primary"
-            icon="Cloudy"
-            plain
-            @click="goTarget('https://gitee.com/JavaLionLi/RuoYi-Vue-Plus/wikis/pages?sort_id=4106467&doc_id=1469725')"
-          >更新日志</el-button
-          >
-        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -71,6 +71,16 @@ import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import useUserStore from '@/store/modules/user'
 import WBg1 from "../components/bg/WBg1.vue";
+import {useDynamicTitle} from "@/utils/dynamicTitle"
+import { onMounted } from "vue";
+import {useSettingsStore,useLocalStore,useSessionStore} from '@/store'
+
+onMounted(()=>{
+  useLocalStore().test="存放在本地中的值"//NOTE: 测试pinia的本地持久化存储
+  useSessionStore().test="存放在会话中的值"//NOTE: 测试pinia的会话持久化存储
+  useSettingsStore().title="登录"
+  useDynamicTitle()
+})

 const userStore = useUserStore()
 const router = useRouter();