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

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = RuoYi-Vue-Plus后台管理系统
+VITE_APP_TITLE = 后台管理系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

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,

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"

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

src/assets/styles/variables.module.scss

@@ -1,6 +1,6 @@
 // base color
-$blue: #324157;
+$blue: #153859;
-$light-blue: #3A71A8;
+$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;

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>

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']

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 { useLocalStore } from './modules/local'
-export * as useAppStore from './modules/app';
+export { useSessionStore } from './modules/session'
-export * as useDictStore from './modules/dict';

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,
+      },
+    ]
+  }
+
+})

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,
+      },
+    ]
+  }
+
+})

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">

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();