Doroudi/issue93

locales/en.yml

@@ -162,3 +162,9 @@ not-found: Not found
 
 notifications:
   empty: No notifications
+
+customize:
+  title: Customize
+  theme: Theme
+  color: Color
+  layout: Layout

locales/fa.yml

@@ -156,3 +156,9 @@ userMenu:
 
 notifications:
   empty: هیچ اعلانی وجود ندارد
+
+customize:
+  title: سفارشی سازی
+  theme: پوسته
+  color: رنگ
+  layout: چیدمان

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@9.1.0",
+  "packageManager": "pnpm@9.14.4",
   "scripts": {
     "build": "vite build --base=/ --mode mocking",
     "dev": "vite --open --port 7000  --mode development",
@@ -14,7 +14,7 @@
     "sizecheck": "npx vite-bundle-visualizer"
   },
   "dependencies": {
-    "@unhead/vue": "^1.11.11",
+    "@unhead/vue": "^1.11.13",
     "@unocss/reset": "^0.53.6",
     "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "^10.11.1",
@@ -23,11 +23,11 @@
     "axios": "^0.27.2",
     "moment": "^2.30.1",
     "nprogress": "^0.2.0",
-    "pinia": "^2.2.6",
+    "pinia": "^2.2.8",
     "vue": "^3.5.13",
     "vue-demi": "^0.14.10",
-    "vue-i18n": "^9.14.1",
-    "vue-router": "^4.4.5",
+    "vue-i18n": "^9.14.2",
+    "vue-router": "^4.5.0",
     "vue3-apexcharts": "^1.8.0"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "@types/nprogress": "^0.2.3",
     "@unocss/eslint-config": "^0.53.6",
     "@vicons/fluent": "^0.12.0",
-    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vue-macros/volar": "^0.30.6",
     "@vue/test-utils": "^2.4.6",
@@ -49,10 +49,10 @@
     "lint-staged": "^13.3.0",
     "lodash": "^4.17.21",
     "msw": "^2.6.6",
-    "naive-ui": "^2.40.1",
+    "naive-ui": "^2.40.3",
     "pinia-plugin-persistedstate": "^2.4.0",
-    "pnpm": "^9.14.2",
-    "rollup": "^4.27.3",
+    "pnpm": "^9.14.4",
+    "rollup": "^4.28.0",
     "sass": "^1.81.0",
     "taze": "^0.11.4",
     "typescript": "^5.7.2",
@@ -65,9 +65,9 @@
     "vite-bundle-visualizer": "^0.8.1",
     "vite-plugin-inspect": "^0.7.42",
     "vite-plugin-mkcert": "^1.17.6",
-    "vite-plugin-pages": "^0.32.3",
+    "vite-plugin-pages": "^0.32.4",
     "vite-plugin-pwa": "^0.19.8",
-    "vite-plugin-vue-devtools": "^7.6.4",
+    "vite-plugin-vue-devtools": "^7.6.7",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-ssg": "^0.23.8",
     "vitest": "^0.33.0",

src/App.vue

@@ -22,6 +22,8 @@ const rtlStyles = [
   tagRtl,
 ]
 
+const customTheme = ref({ ...themeOverrides })
+
 watch(() => layout.activeLanguage, () => {
   const body = document.querySelector('body') as HTMLElement
   if (layout.isRtl)
@@ -38,11 +40,16 @@ watch(() => layout.isDark, (newValue) => {
   else
     document.documentElement.classList.remove('dark')
 }, { immediate: true })
+
+watch(() => layout.themeColor, (newValue) => {
+  if (customTheme.value.common && newValue !== '')
+    customTheme.value.common.primaryColor = newValue
+}, { immediate: true })
 </script>
 
 <template>
   <n-config-provider
-    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides"
+    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="customTheme"
     :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false"
   >
     <n-notification-provider placement="bottom-right">

src/components.d.ts

@@ -20,16 +20,17 @@ declare module 'vue' {
     CreateColor: typeof import('./components/Color/CreateColor.vue')['default']
     CreateProduct: typeof import('./components/Products/CreateProduct.vue')['default']
     CustomerManagement: typeof import('./components/Customers/CustomerManagement.vue')['default']
+    CustomizeDialog: typeof import('./components/CustomizeDialog/CustomizeDialog.vue')['default']
     DashboardCard: typeof import('./components/DashboardCard.vue')['default']
     DashboardPage: typeof import('./components/Dahboard/DashboardPage.vue')['default']
     DonutChart: typeof import('./components/DonutChart.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
     EnglandIcon: typeof import('./components/CountryIcons/EnglandIcon.vue')['default']
     GermanyIcon: typeof import('./components/CountryIcons/GermanyIcon.vue')['default']
     GithubButton: typeof import('./components/GithubButton.vue')['default']
-    LanguageSelect: typeof import('./components/LanguageSelect.vue')['default']
+    LanguageSelect: typeof import('./components/Navbar/LanguageSelect.vue')['default']
     LineChart: typeof import('./components/LineChart.vue')['default']
-    Navbar: typeof import('./components/Navbar.vue')['default']
+    Navbar: typeof import('./components/Navbar/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
@@ -50,10 +51,14 @@ declare module 'vue' {
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    Notifications: typeof import('./components/Notifications.vue')['default']
+    Notifications: typeof import('./components/Navbar/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NRadioButton: typeof import('naive-ui')['NRadioButton']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
@@ -65,9 +70,10 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./components/Sidebar.vue')['default']
-    ThemeSwitch: typeof import('./components/ThemeSwitch.vue')['default']
+    ThemeCustomize: typeof import('./components/Navbar/ThemeCustomize.vue')['default']
+    ThemeSwitch: typeof import('./components/Navbar/ThemeSwitch.vue')['default']
     TrendingProducts: typeof import('./components/Dahboard/TrendingProducts.vue')['default']
     TurkishIcon: typeof import('./components/CountryIcons/TurkishIcon.vue')['default']
-    UserProfile: typeof import('./components/UserProfile.vue')['default']
+    UserProfile: typeof import('./components/Navbar/UserProfile.vue')['default']
   }
 }

src/components/BarChart.vue

@@ -42,7 +42,7 @@ const chartOptions = ref({
   dataLabels: {
     enabled: false,
   },
-  colors: ['#3db9af', '#37938d', '#276e6b', '#7fcdca'],
+  colors: buildThemeSeries(),
   plotOptions: {
     bar: {
       columnWidth: '17%',
@@ -71,6 +71,10 @@ const series = ref([
     data: [3, 4, 15, 5, 4, 60, 10],
   },
 ])
+
+function buildThemeSeries() {
+  return ['#3db9af', '#37938d', '#276e6b', '#7fcdca']
+}
 </script>
 
 <template>

src/components/CustomizeDialog/CustomizeDialog.vue

@@ -0,0 +1,101 @@
+<script setup>
+import {
+  Checkmark48Filled as CheckIcon,
+  WeatherMoon48Regular as MoonIcon,
+  WeatherSunny48Regular as SunIcon,
+} from '@vicons/fluent'
+import { storeToRefs } from 'pinia'
+
+const { t } = useI18n()
+
+const layout = useLayoutStore()
+const { isRtl } = storeToRefs(layout)
+function setLight() {
+  if (layout.isDark)
+    layout.toggleTheme()
+}
+
+function setDark() {
+  if (!layout.isDark)
+    layout.toggleTheme()
+}
+
+const colors = [
+  '#00ad4c', '#ef4848', '#FC0', '#FF8000', '#22d3ee',
+]
+const selectedColorIndex = ref(0)
+function setColor(index) {
+  selectedColorIndex.value = index
+  layout.setThemeColor(colors[index])
+}
+
+onMounted(() => {
+  selectedColorIndex.value = colors.findIndex(x => x === layout.themeColor)
+})
+</script>
+
+<template>
+  <div class="section">
+    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+      {{ t('customize.theme') }}
+    </NTag>
+
+    <n-space justify="center" size="large">
+      <NButton ghost class="p-7" :type="layout.isDark === false ? 'primary' : 'default'" size="large" @click="setLight">
+        <template #icon>
+          <NIcon>
+            <SunIcon />
+          </NIcon>
+        </template>
+      </NButton>
+
+      <NButton ghost class="w-full p-7" :type="layout.isDark ? 'primary' : 'default'" size="large" @click="setDark">
+        <template #icon>
+          <NIcon>
+            <MoonIcon />
+          </NIcon>
+        </template>
+      </NButton>
+    </n-space>
+  </div>
+  <div class="section">
+    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+      {{ t('customize.color') }}
+    </NTag>
+
+    <div>
+      <NButton
+        v-for="(color, index) of colors" :key="index" :color="color" size="medium" circle icon="CheckIcon"
+        class="mx-1" @click="setColor(index)"
+      >
+        <template #icon>
+          <CheckIcon v-if="selectedColorIndex === index" />
+          <span v-else />
+        </template>
+      </NButton>
+    </div>
+  </div>
+  <div class="section">
+    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+      {{ t('customize.layout') }}
+    </NTag>
+
+    <div>
+      <n-switch v-model:value="isRtl" />
+      RTL Layout
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.section {
+    margin-bottom: 1rem;
+    padding: 1rem 0;
+    .section-title {
+        font-weight: 500;
+        padding: 0.2rem 0;
+        border-bottom: solid 1px #CCC;
+        margin-bottom:1rem;
+    }
+}
+</style>

src/components/GithubButton.vue

@@ -7,12 +7,9 @@
     <n-tooltip placement="top" trigger="hover">
       <template #trigger>
         <a href="https://github.com/doroudi/yummyadmin" block target="_blank">
-          <n-button strong round type="primary" class="pulse-animated" flex space-between py-5 px-3>
+          <n-button strong round color="#36ad6a" class="pulse-animated" flex space-between py-5 px-3>
             <NIcon size="1.6rem" class="mr-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                viewBox="0 0 32 32"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                 <path
                   d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2z"
                   fill-rule="evenodd" fill="currentColor"

src/components/LanguageSelect.vue → src/components/Navbar/LanguageSelect.vue

@@ -2,13 +2,13 @@
 import { storeToRefs } from 'pinia'
 import { Translate16Regular as TranslateIcon } from '@vicons/fluent'
 import { NIcon } from 'naive-ui/es/icon'
-import EnglandIcon from './CountryIcons/EnglandIcon.vue'
-import GermanyIcon from './CountryIcons/GermanyIcon.vue'
-import ChineseIcon from './CountryIcons/ChineseIcon.vue'
-import ArabicIcon from './CountryIcons/ArabicIcon.vue'
-import TurkishIcon from './CountryIcons/TurkishIcon.vue'
+import EnglandIcon from '../CountryIcons/EnglandIcon.vue'
+import GermanyIcon from '../CountryIcons/GermanyIcon.vue'
+import ChineseIcon from '../CountryIcons/ChineseIcon.vue'
+import ArabicIcon from '../CountryIcons/ArabicIcon.vue'
+import TurkishIcon from '../CountryIcons/TurkishIcon.vue'
 
-import PersianIcon from './CountryIcons/PersianIcon.vue'
+import PersianIcon from '../CountryIcons/PersianIcon.vue'
 
 const { t } = useI18n()
 const layoutStore = useLayoutStore()

src/components/Navbar.vue → src/components/Navbar/Navbar.vue

@@ -21,6 +21,7 @@ const { t } = useI18n()
     </template>
     <template #extra>
       <div class="flex items-center">
+        <ThemeCustomize />
         <ThemeSwitch class="mx-1" />
         <LanguageSelect class="mx-1" />
         <Notifications class="mx-1" />

src/components/Navbar/ThemeCustomize.vue

@@ -0,0 +1,32 @@
+<script setup lang='ts'>
+import {
+  Settings48Regular as CustomizeIcon,
+} from '@vicons/fluent'
+
+const showCustomizeDialog = ref(false)
+const { t } = useI18n()
+
+function toggleDialog() {
+  showCustomizeDialog.value = !showCustomizeDialog.value
+}
+</script>
+
+<template>
+  <div v-bind="$attrs">
+    <n-button quaternary circle @click="toggleDialog()">
+      <template #icon>
+        <NIcon size="1.4rem">
+          <CustomizeIcon class="rotate-animated" />
+        </NIcon>
+      </template>
+    </n-button>
+  </div>
+
+  <n-drawer v-model:show="showCustomizeDialog" :width="400" placement="right">
+    <n-drawer-content closable :title="t('customize.title')">
+      <CustomizeDialog @close="showCustomizeDialog = false" />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<style scoped lang='scss'></style>

src/layouts/default.vue

@@ -9,7 +9,7 @@
     <n-layout :native-scrollbar="false" position="static">
       <div class="main-content flex-1 bg-slate-100 dark:bg-slate-800 dark:text-white my-2 mr-2">
         <Navbar />
-        <div class="px-0 py-1 md:p-3 md:pb-15 relative">
+        <div class="px-0 py-1 md:p-3 md:pb-15 relative md:container md:mx-auto">
           <router-view v-slot="{ Component, route }">
             <transition name="route" mode="out-in">
               <div :key="route">

src/store/layout.store.ts

@@ -6,7 +6,7 @@ export const useLayoutStore = defineStore('layout', () => {
   const activeLanguage = ref('en')
   const isRtl = ref(false)
   const { t, locale } = useI18n()
-
+  const themeColor = ref('')
   const isDark = ref(false)
 
   watch(() => useWindowSize().width.value, (newValue: number) => {
@@ -28,6 +28,10 @@ export const useLayoutStore = defineStore('layout', () => {
     isRtl.value = (dir !== null && dir === 'rtl')
   }
 
+  function setThemeColor(color: string) {
+    themeColor.value = color
+  }
+
   return {
     collapsed,
     toggleSidebar,
@@ -37,6 +41,8 @@ export const useLayoutStore = defineStore('layout', () => {
     changeLanguage,
     forceCollapsed,
     isDark,
+    setThemeColor,
+    themeColor,
   }
 }, { persist: true })