perf: optimized the appearance

frontend/src/components/common/ResizeableWrapper.vue

@@ -101,6 +101,7 @@ const handleMouseOver = () => {
         top: 0;
         bottom: 0;
         transition: background-color 0.3s ease-in;
+        z-index: 1;
     }
 
     .resize-divider-hide {

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -266,8 +266,8 @@ const onSave = () => {
 }
 
 :deep(.pin-btn) {
-    border-color: v-bind('themeVars.borderColor');
+    border-color: v-bind('themeVars.iconColorDisabled');
-    background-color: v-bind('themeVars.borderColor');
+    background-color: v-bind('themeVars.iconColorDisabled');
 }
 
 //:deep(.n-card--bordered) {

frontend/src/components/sidebar/Ribbon.vue

@@ -13,8 +13,10 @@ import usePreferencesStore from 'stores/preferences.js'
 import Record from '@/components/icons/Record.vue'
 import { extraTheme } from '@/utils/extra_theme.js'
 import useBrowserStore from 'stores/browser.js'
+import { useRender } from '@/utils/render.js'
 
 const themeVars = useThemeVars()
+const render = useRender()
 
 const props = defineProps({
     value: {
@@ -30,9 +32,6 @@ const props = defineProps({
 const emit = defineEmits(['update:value'])
 
 const iconSize = computed(() => Math.floor(props.width * 0.45))
-const renderIcon = (icon) => {
-    return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
-}
 
 const browserStore = useBrowserStore()
 const i18n = useI18n()
@@ -62,12 +61,12 @@ const preferencesOptions = computed(() => {
         {
             label: i18n.t('menu.preferences'),
             key: 'preferences',
-            icon: renderIcon(Config),
+            icon: render.renderIcon(Config, { strokeWidth: 3 }),
         },
         // {
         //     label: i18n.t('menu.help'),
         //     key: 'help',
-        //     icon: renderIcon(Help),
+        //     icon: render.renderIcon(Help, { strokeWidth: 3 }),
         // },
         {
             label: i18n.t('menu.check_update'),
@@ -122,23 +121,21 @@ const exThemeVars = computed(() => {
         }"
         class="flex-box-v">
         <div class="ribbon-wrapper flex-box-v">
+            <n-tooltip v-for="(m, i) in menuOptions" :key="i" :delay="2" :show-arrow="false" placement="right">
+                <template #trigger>
                     <div
-                v-for="(m, i) in menuOptions"
                         v-show="m.show !== false"
-                :key="i"
                         :class="{ 'ribbon-item-active': props.value === m.key }"
                         class="ribbon-item clickable"
                         @click="emit('update:value', m.key)">
-                <n-tooltip :delay="2" :show-arrow="false" placement="right">
-                    <template #trigger>
                         <n-icon :size="iconSize">
                             <component :is="m.icon" :stroke-width="3.5" />
                         </n-icon>
+                    </div>
                 </template>
                 {{ m.label }}
             </n-tooltip>
         </div>
-        </div>
         <div class="flex-item-expand"></div>
         <div class="nav-menu-item flex-box-v">
             <n-dropdown