wip

src/components/BaseButton.vue

@@ -7,7 +7,7 @@ interface IProps {
   disabled?: boolean
   loading?: boolean
   size?: 'small' | 'normal' | 'large'
-  type?: 'primary' | 'link' | 'info' | 'orange'
+  type?: 'primary' | 'info' | 'orange'
 }
 
 withDefaults(defineProps<IProps>(), {
@@ -27,12 +27,7 @@ defineEmits(['click'])
       :class="[active && 'active', size, type, (disabled || loading) && 'disabled']"
     >
       <span :style="{ opacity: loading ? 0 : 1 }"><slot></slot></span>
-      <IconEosIconsLoading
-        v-if="loading"
-        class="loading"
-        width="18"
-        :color="type === 'info' ? '#000000' : '#ffffff'"
-      />
+      <IconEosIconsLoading v-if="loading" class="loading" width="18" :color="type === 'info' ? '#000000' : '#ffffff'" />
     </div>
   </Tooltip>
 </template>
@@ -45,7 +40,7 @@ defineEmits(['click'])
   --btn-info: white;
   --btn-info-hover: #eaeaea;
   --btn-orange: #facc15;
-  --btn-orange-hover: #fbe27e;
+  --btn-orange-hover: #bfac61;
 }
 
 html.dark {
@@ -124,15 +119,6 @@ html.dark {
     }
   }
 
-  &.link {
-    border-radius: 0;
-    border-bottom: 2px solid transparent;
-
-    &:hover:not(.disabled) {
-      border-bottom: 2px solid var(--color-font-2);
-    }
-  }
-
   &.info {
     background: var(--btn-info);
     border: 1px solid var(--color-main-text);

src/components/PopConfirm.vue

@@ -18,9 +18,9 @@ export default {
       validator(value) {
         // Validate that array items have the correct structure
         if (Array.isArray(value)) {
-          return value.every(item => 
-            typeof item === 'object' && 
-            item !== null && 
+          return value.every(item =>
+            typeof item === 'object' &&
+            item !== null &&
             typeof item.text === 'string' &&
             ['normal', 'bold', 'red', 'redBold'].includes(item.type)
           )
@@ -114,8 +114,8 @@ export default {
                       <div ref="tip" class="pop-confirm-content shadow-2xl">
                         <div class="w-52 title-content">
                           {this.titleItems.map((item, index) => (
-                            <div 
-                              key={index} 
+                            <div
+                              key={index}
                               style={this.getTextStyle(item.type)}
                               class="title-item"
                             >
@@ -140,17 +140,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pop-confirm-content {
-  position: fixed;
   background: var(--color-tooltip-bg);
-  padding: 1rem;
-  border-radius: .6rem;
   transform: translate(-50%, calc(-100% - .6rem));
-  z-index: 999;
+  @apply fixed z-9999 shadow-2xl rounded-lg p-3;
 
   .title-content {
     .title-item {
       margin-bottom: 0.25rem;
-      
+
       &:last-child {
         margin-bottom: 0;
       }

src/components/base/OptionButton.vue

@@ -6,9 +6,7 @@
       <slot></slot>
     </div>
     <div class="relative group">
-      <div
-        class="more w-10 rounded-r-lg h-full center border-solid border-1 border-l-gray/50 border-transparent box-border transition-all duration-300"
-      >
+      <div class="more w-10 rounded-r-lg h-full center box-border transition-all duration-300">
         <IconFluentChevronDown20Regular />
       </div>
       <div
@@ -34,6 +32,8 @@
 .primary-btn {
   .more {
     background: var(--btn-primary);
+    border: 1.5px solid transparent;
+    border-left-color: #69788e;
     &:hover {
       background: var(--btn-primary-hover);
     }
@@ -44,7 +44,8 @@
   .more {
     background: var(--btn-orange);
     color: black;
-    border-left-color: black;
+    border: 1px solid transparent;
+    border-left-color: #cfb752;
     &:hover {
       background: var(--btn-orange-hover);
     }

src/components/base/Tooltip.vue

@@ -72,14 +72,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .tip {
-  position: fixed;
-  font-size: 1rem;
-  z-index: 9999;
-  border-radius: .3rem;
-  padding: 0.4rem .8rem;
-  color: var(--color-font-1);
   background: var(--color-tooltip-bg);
   max-width: 22rem;
-  box-shadow: 0 0 6px 1px var(--color-tooltip-shadow);
+  @apply fixed z-9999 shadow-xl border-item-solid rounded-md px-2.5 py-1.5;
 }
 </style>

src/components/dialog/Dialog.vue

@@ -245,7 +245,8 @@ $time: 0.3s;
   }
 
   .modal {
-    @apply relative bg-second overflow-hidden flex flex-col transition-all duration-300;
+    @apply relative overflow-hidden flex flex-col transition-all duration-300;
+    background: var(--color-card-bg);
 
     .close {
       @apply absolute right-1.2rem top-1.2rem z-999;

src/components/list/WordList2.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-
-import { Word } from "@/types/types.ts";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import BaseList from "@/components/list/BaseList.vue";
-import { usePlayWordAudio } from "@/hooks/sound.ts";
-import Tooltip from "@/components/base/Tooltip.vue";
-import WordItem from "@/components/WordItem.vue";
-
-withDefaults(defineProps<{
-  list: Word[],
-  showTranslate?: boolean
-  showWord?: boolean
-}>(), {
-  list: [],
-  showTranslate: true,
-  showWord: true
-})
-
-const emit = defineEmits<{
-  click: [val: { item: Word, index: number }],
-  title: [val: { item: Word, index: number }],
-}>()
-
-const listRef: any = $ref(null as any)
-
-function scrollToBottom() {
-  listRef?.scrollToBottom()
-}
-
-function scrollToItem(index: number) {
-  listRef?.scrollToItem(index)
-}
-
-const playWordAudio = usePlayWordAudio()
-
-defineExpose({ scrollToBottom, scrollToItem })
-
-</script>
-
-<template>
-  <BaseList ref="listRef" @click="(e: any) => emit('click', e)" :list="list" v-bind="$attrs">
-    <template v-slot:prefix="{ item, index }">
-      <slot name="prefix" :item="item" :index="index"></slot>
-    </template>
-    <template v-slot="{ item, index }">
-      <div class="item-title">
-        <span class="text-sm">{{ index + 1 }}.</span>
-        <span class="word" :class="!showWord && 'word-shadow'">{{ item.word }}</span>
-        <span class="phonetic" :class="!showWord && 'word-shadow'">{{ item.phonetic0 }}</span>
-        <VolumeIcon class="volume" @click="playWordAudio(item.word)"></VolumeIcon>
-      </div>
-      <div class="item-sub-title flex flex-col gap-2" v-if="item.trans.length && showTranslate">
-        <div v-for="v in item.trans">
-          <Tooltip v-if="v.cn.length > 30" :key="item.word" :title="v.pos + '  ' + v.cn">
-            <span>{{ v.pos + ' ' + v.cn.slice(0, 30) + '...' }}</span>
-          </Tooltip>
-          <span v-else>{{ v.pos + ' ' + v.cn }}</span>
-        </div>
-      </div>
-    </template>
-    <template v-slot:suffix="{ item, index }">
-      <slot name="suffix" :item="item" :index="index"></slot>
-    </template>
-  </BaseList>
-</template>

src/components/setting/SettingDialog.vue

@@ -58,7 +58,7 @@ let show = $ref(false)
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    border-right: 1px solid gainsboro;
+    border-right: 2px solid var(--color-line);
 
     .tabs {
       padding: 1rem;