Refine setting styles (#213)

change/@acedatacloud-nexior-0d443510-881c-4392-8319-ebb422d346e9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix setting style",
+  "packageName": "@acedatacloud/nexior",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}

src/assets/scss/_common.scss

@@ -38,6 +38,10 @@ html.dark,
   padding: 0 !important;
 }
 
+.el-dropdown {
+  color: var(--el-text-color-primary);
+}
+
 .el-dropdown-menu {
   padding: 10px;
   .el-dropdown-menu__item {
@@ -46,11 +50,23 @@ html.dark,
   }
 }
 
+.el-form-item__label {
+  color: var(--el-text-color-primary);
+}
+
 .el-dropdown__popper {
   --el-dropdown-menuItem-hover-fill: var(--el-bg-color-page);
   --el-dropdown-menuItem-hover-color: var(--el-text-color-primary);
 }
 
+.el-menu-item {
+  height: initial;
+  line-height: inherit;
+  --el-menu-hover-bg-color: var(--el-bg-color-page);
+  border-radius: 15px;
+  color: var(--el-text-color-primary);
+}
+
 .el-card {
   word-wrap: break-word;
   border-radius: 1rem;
@@ -60,7 +76,7 @@ html.dark,
 
 .el-breadcrumb__inner a,
 .el-breadcrumb__inner.is-link {
-  color: var(--el-text-color-regular);
+  color: var(--el-text-color-primary);
 }
 
 .el-radio-group {
@@ -97,6 +113,9 @@ html.dark,
 
 .el-dialog {
   border-radius: 1rem;
+  .el-dialog__body {
+    color: var(--el-text-color-primary);
+  }
 }
 
 .v-codemirror {

src/assets/scss/_markdown.scss

@@ -54,3 +54,7 @@ pre button {
   right: 0;
   border-radius: 0 0.15rem;
 }
+
+.markdown-body hr {
+  height: 1px;
+}

src/components/setting/General.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="flex justify-between items-center mb-4">
-    <label class="block mb-2 text-sm font-medium">{{ $t('common.settings.theme') }}</label>
+    <label class="block mb-2 text-sm">{{ $t('common.settings.theme') }}</label>
     <theme-switcher />
   </div>
   <div class="flex justify-between items-center mb-4">
-    <label class="block mb-2 text-sm font-medium">{{ $t('common.settings.language') }}</label>
+    <label class="block mb-2 text-sm">{{ $t('common.settings.language') }}</label>
     <locale-switcher />
   </div>
 </template>

src/components/setting/Site.vue

@@ -135,7 +135,7 @@ export default defineComponent({
   }
   .form {
     .logo {
-      max-width: 200px;
+      max-width: 150px;
     }
     .tip {
       color: var(--el-text-color-secondary);

src/components/user/Locale.vue

@@ -57,16 +57,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style scoped>
-.el-dropdown-link {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-}
-.el-icon--right {
-  margin-left: 4px;
-}
-</style>

src/components/user/Setting.vue

@@ -1,21 +1,19 @@
 <template>
   <el-dialog :model-value="visible" @close="onClose">
     <div class="flex settings">
-      <aside class="w-56 border-r">
-        <nav class="flex flex-col p-2 space-y-1">
-          <button
+      <aside class="w-40 h-full border-r">
+        <el-menu class="border-r-0">
+          <el-menu-item
             v-for="(item, index) in navItems"
             :key="index"
-            :class="[
-              'flex items-center px-4 py-2 text-sm rounded-lg cursor-pointer',
-              activeTab === item.key ? 'active' : ''
-            ]"
+            :index="item.key"
+            :class="['flex items-center px-2 cursor-pointer py-2', activeTab === item.key ? 'active' : '']"
             @click="activeTab = item.key"
           >
             <font-awesome-icon :icon="item.icon" class="mr-2" />
             {{ item.label }}
-          </button>
-        </nav>
+          </el-menu-item>
+        </el-menu>
       </aside>
       <main class="flex-1 p-6 overflow-y-auto">
         <div v-if="activeTab === 'general'">
@@ -40,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { ElDialog } from 'element-plus';
+import { ElDialog, ElMenu, ElMenuItem, ElDropdownMenu, ElDropdownItem, ElSubMenu } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faCog, faBell, faUserShield, faMagic, faMoneyBill } from '@fortawesome/free-solid-svg-icons';
 import GeneralSetting from '@/components/setting/General.vue';
@@ -53,6 +51,8 @@ export default defineComponent({
   name: 'UserSetting',
   components: {
     ElDialog,
+    ElMenu,
+    ElMenuItem,
     FontAwesomeIcon,
     GeneralSetting,
     SiteSetting,

src/components/user/Theme.vue

@@ -68,18 +68,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style scoped lang="scss">
-.demonstration {
-  margin-right: 8px;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-}
-.el-dropdown-link {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-}
-</style>