Merge pull request #37 from suyuan32/dev

fix: many bugs for dark mode in new version
suyuan32 · May 8, 2023 · 35f3450 · 35f3450
2 parents 782e78d + 859bf9e
commit 35f3450
Show file tree

Hide file tree

Showing 71 changed files with 29,430 additions and 1,009 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,4 @@
 # spa-title
-VITE_GLOB_APP_TITLE = Simple Admin
+VITE_GLOB_APP_TITLE = Simple Admin
+
+VITE_GLOB_APP_SHORT_NAME=simple_admin
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,7 +5,7 @@
       "type": "chrome",
       "request": "launch",
       "name": "Launch Chrome",
-      "url": "https://localhost:5173",
+      "url": "http://192.168.50.216:5173",
       "webRoot": "${workspaceFolder}/src",
       "sourceMaps": true
     }

diff --git a/index.html b/index.html
@@ -11,6 +11,16 @@
     <title><%= VITE_GLOB_APP_TITLE %></title>
     <link rel="icon" href="/favicon.ico" />
   </head>
+  <script>
+    (() => {
+      var htmlRoot = document.getElementById('htmlRoot');
+      var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+      if (htmlRoot && theme) {
+        htmlRoot.setAttribute('data-theme', theme);
+        theme = htmlRoot = null;
+      }
+    })();
+  </script>
   <body>
     <div id="app">
       <style>

diff --git a/package.json b/package.json
@@ -102,6 +102,7 @@
     "tinymce": "^6.4.2",
     "vditor": "^3.9.2",
     "vue": "^3.2.47",
+    "vue-codemirror6": "^1.1.20",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.1.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider :locale="getAntdLocale">
+  <ConfigProvider :locale="getAntdLocale" :prefix-cls="cssPrefix">
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -13,9 +13,41 @@
   import { useLocale } from '/@/locales/useLocale';
 
   import 'dayjs/locale/zh-cn';
+  import { ref, watch } from 'vue';
+  import { useAppStore } from './store/modules/app';
+  import { CssPrefixEnum } from './enums/appEnum';
+
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
+  const cssPrefix = ref<string>();
+
+  const appStore = useAppStore();
+
+  const changePrefix = function (value: string) {
+    if (value === CssPrefixEnum.DARK) {
+      cssPrefix.value = CssPrefixEnum.DARK;
+    } else {
+      cssPrefix.value = CssPrefixEnum.DEFAULT;
+    }
+  };
+
+  changePrefix(appStore.getDarkMode);
+
+  watch(
+    () => appStore.getDarkMode,
+    (value, _oldValue) => {
+      changePrefix(value);
+    },
+  );
+
+  ConfigProvider.config({
+    prefixCls: cssPrefix.value,
+    // theme: {
+    //   primaryColor: '#262626',
+    // },
+  });
+
   // Listening to page changes and dynamically changing site titles
   useTitle();
 </script>
diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts
@@ -4,12 +4,12 @@ import appLogo from './src/AppLogo.vue';
 import appProvider from './src/AppProvider.vue';
 import appSearch from './src/search/AppSearch.vue';
 import appLocalePicker from './src/AppLocalePicker.vue';
-// import appDarkModeToggle from './src/AppDarkModeToggle.vue';
+import appDarkModeToggle from './src/AppDarkModeToggle.vue';
 
 export { useAppProviderContext } from './src/useAppContext';
 
 export const AppLogo = withInstall(appLogo);
 export const AppProvider = withInstall(appProvider);
 export const AppSearch = withInstall(appSearch);
 export const AppLocalePicker = withInstall(appLocalePicker);
-// export const AppDarkModeToggle = withInstall(appDarkModeToggle);
+export const AppDarkModeToggle = withInstall(appDarkModeToggle);
diff --git a/src/components/Application/src/AppDarkModeToggle.vue b/src/components/Application/src/AppDarkModeToggle.vue
@@ -1,13 +1,10 @@
 <template>
   <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
     <div :class="`${prefixCls}-inner`"></div>
-    <SvgIcon size="14" name="sun" />
-    <SvgIcon size="14" name="moon" />
   </div>
 </template>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
-  import SvgIcon from '@/components/Icon/Icon.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
@@ -39,7 +36,34 @@
 
   html[data-theme='dark'] {
     .@{prefix-cls} {
-      border: 1px solid rgb(196 188 188);
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: space-between;
+      width: 50px;
+      height: 26px;
+      margin-left: auto;
+      padding: 0 6px;
+      border-radius: 30px;
+      background-color: #fff;
+      cursor: pointer;
+
+      &-inner {
+        position: absolute;
+        z-index: 1;
+        width: 18px;
+        height: 18px;
+        transition: transform 0.5s, background-color 0.5s;
+        border-radius: 50%;
+        background-color: #151515;
+        will-change: transform;
+      }
+
+      &--dark {
+        .@{prefix-cls}-inner {
+          transform: translateX(calc(100% + 2px));
+        }
+      }
     }
   }
 

diff --git a/src/components/Application/src/AppLocalePicker.vue b/src/components/Application/src/AppLocalePicker.vue
@@ -12,7 +12,7 @@
     overlayClassName="app-locale-picker-overlay"
   >
     <span class="cursor-pointer flex items-center">
-      <Icon icon="ion:language" />
+      <Icon icon="ion:language" style="font-size: 1em" />
       <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
     </span>
   </Dropdown>

diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
@@ -42,6 +42,40 @@
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-basic-title';
 
+  [data-theme='dark'] {
+    .@{prefix-cls} {
+      display: flex;
+      position: relative;
+      padding-left: 7px;
+      color: white;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      cursor: pointer;
+      user-select: none;
+
+      &-normal {
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      &-show-span::before {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 0;
+        width: 3px;
+        height: 16px;
+        margin-right: 4px;
+        background-color: @primary-color;
+      }
+
+      &-help {
+        margin-left: 10px;
+      }
+    }
+  }
+
   .@{prefix-cls} {
     display: flex;
     position: relative;

diff --git a/src/components/CodeEditor/index.ts b/src/components/CodeEditor/index.ts
diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue