fix: tiny-tooltip effect change to lgith

1. 修复tiny-tooltip effect 为 dark 的样式问题 2. 修改所有 tiny-tooltip 的 effect 值为 light
opentiny · Jan 9, 2025 · 347a475 · 347a475
1 parent 3adbc19
commit 347a475
Show file tree

Hide file tree

Showing 30 changed files with 59 additions and 40 deletions.
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
@@ -82,7 +82,7 @@
             @update:modelValue="onModelUpdate"
           >
             <template #default>
-              <tiny-tooltip class="item" effect="dark" content="源码编辑" placement="left">
+              <tiny-tooltip class="item" effect="light" content="源码编辑" placement="left">
                 <icon-writing class="code-icon" @click="editorModalRef?.open && editorModalRef.open()"></icon-writing>
               </tiny-tooltip>
             </template>

diff --git a/packages/common/component/MetaListActions.vue b/packages/common/component/MetaListActions.vue
@@ -1,6 +1,6 @@
 <template lang="">
   <span v-for="(actionsItem, index) in actions" :key="index" class="actionsItem" @click="actionsEvents(actionsItem)">
-    <tiny-tooltip class="item" effect="dark" :content="actionsItem.title" placement="top">
+    <tiny-tooltip class="item" effect="light" :content="actionsItem.title" placement="top">
       <component :is="actionsItem.icon"></component>
     </tiny-tooltip>
   </span>

diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
@@ -13,14 +13,21 @@
             content="格式化"
             placement="top"
             :open-delay="OPEN_DELAY.Default"
+            effect="light"
           >
             <public-icon name="json" @click="formatCode"></public-icon>
           </tiny-tooltip>
           <span v-if="showFullScreenBtn">
-            <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top" :open-delay="OPEN_DELAY.Default">
+            <tiny-tooltip
+              v-if="!fullscreen"
+              effect="light"
+              content="全屏"
+              placement="top"
+              :open-delay="OPEN_DELAY.Default"
+            >
               <public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
             </tiny-tooltip>
-            <tiny-tooltip v-else content="退出全屏" placement="top" :open-delay="OPEN_DELAY.Default">
+            <tiny-tooltip v-else content="退出全屏" effect="light" placement="top" :open-delay="OPEN_DELAY.Default">
               <public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
             </tiny-tooltip>
           </span>

diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
@@ -72,12 +72,12 @@
         >
           <div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
             <ul class="list">
-              <tiny-tooltip content="版本列表" placement="top">
+              <tiny-tooltip content="版本列表" placement="top" effect="light">
                 <li class="list-item" @click.stop="$emit('openVersionPanel', { item, index })">
                   <svg-button class="list-item-svg" name="versions"> </svg-button>
                 </li>
               </tiny-tooltip>
-              <tiny-tooltip content="移除" placement="top">
+              <tiny-tooltip content="移除" placement="top" effect="light">
                 <li class="list-item" @click.stop="$emit('deleteBlock', item)">
                   <svg-button class="list-item-svg" name="remove"> </svg-button>
                 </li>

diff --git a/packages/common/component/SvgButton.vue b/packages/common/component/SvgButton.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="svg-button" :class="{ 'svg-button-hover': hoverBgColor }" @click="$emit('click', $event)">
-    <tiny-tooltip effect="dark" :content="tips" :placement="placement">
+    <tiny-tooltip effect="light" :content="tips" :placement="placement">
       <component :is="name" v-if="isTinyIcon" />
       <svg-icon v-else :name="name"></svg-icon>
     </tiny-tooltip>

diff --git a/packages/configurator/src/collection-configurator/CollectionConfigurator.vue b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue
@@ -3,7 +3,7 @@
     <tiny-select v-model="selected" placeholder="请选择" @change="sourceChange">
       <tiny-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </tiny-option>
     </tiny-select>
-    <tiny-tooltip class="item" effect="dark" content="刷新数据源" placement="top">
+    <tiny-tooltip class="item" effect="light" content="刷新数据源" placement="top">
       <icon-common-refresh @click="refreshData"></icon-common-refresh>
     </tiny-tooltip>
   </div>

diff --git a/packages/configurator/src/container-configurator/ContainerConfigurator.vue b/packages/configurator/src/container-configurator/ContainerConfigurator.vue
@@ -9,7 +9,7 @@
         </div>
       </template>
       <template #operate="{ data }">
-        <tiny-tooltip class="item" effect="dark" content="删除" placement="top">
+        <tiny-tooltip class="item" effect="light" content="删除" placement="top">
           <span class="item-icon">
             <icon-del @click="delChildren(data)"></icon-del>
           </span>

diff --git a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
@@ -26,7 +26,7 @@
       </div>
 
       <template #reference>
-        <tiny-tooltip class="item" effect="dark" content="新增原生属性" placement="top">
+        <tiny-tooltip class="item" effect="light" content="新增原生属性" placement="top">
           <span class="icon-wrap"><IconPlus @click="addAttr"></IconPlus></span>
         </tiny-tooltip>
       </template>

diff --git a/packages/configurator/src/ip-section-configurator/IpSectionConfigurator.vue b/packages/configurator/src/ip-section-configurator/IpSectionConfigurator.vue
@@ -18,7 +18,14 @@
             :value="optionItem"
           ></tiny-option>
         </tiny-select>
-        <tiny-tooltip v-else class="item" effect="dark" :content="item.tip || ''" placement="top" :disbaled="!item.tip">
+        <tiny-tooltip
+          v-else
+          class="item"
+          effect="light"
+          :content="item.tip || ''"
+          placement="top"
+          :disabled="!item.tip"
+        >
           <tiny-input v-model="state.ipArray[index]" :disabled="item.disabled" @update:modelValue="ipChange">
           </tiny-input>
         </tiny-tooltip>

diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
@@ -5,7 +5,7 @@
       <div v-for="(slot, index) in slotList" :key="slot.name" class="use-slot">
         <div class="use-slot-item-name">
           {{ slot.name }}
-          <tiny-tooltip effect="dark" :content="state.currentComponent?.content" placement="bottom" width="260">
+          <tiny-tooltip effect="light" :content="state.currentComponent?.content" placement="bottom" width="260">
             <span class="item-icon">
               <component :is="state.currentComponent?.icon"></component>
             </span>

diff --git a/packages/configurator/src/radio-configurator/RadioConfigurator.vue b/packages/configurator/src/radio-configurator/RadioConfigurator.vue
@@ -7,6 +7,7 @@
       :disabled="disabled"
       :content="option.tip"
       placement="top"
+      effect="light"
     >
       <label :class="['radio-button', { active: option.value === value }]">
         <input v-model="picked" type="radio" name="radio-buttons" :value="option.value" @click="change" />

diff --git a/packages/configurator/src/variable-configurator/VariableConfigurator.vue b/packages/configurator/src/variable-configurator/VariableConfigurator.vue
@@ -74,6 +74,7 @@
                 <tiny-tooltip
                   placement="top"
                   content="定时更新开启后，页面运行时将会定期请求远程数据源，实现数据定时更新。"
+                  effect="light"
                   ><span>定时更新：</span></tiny-tooltip
                 >
                 <tiny-switch v-model="state.isPoll"></tiny-switch>

diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
@@ -7,7 +7,7 @@
       </tiny-tab-item>
     </tiny-tabs>
     <div v-if="layoutState.settings.render === 'style'" class="tabs-setting">
-      <tiny-tooltip effect="dark" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
+      <tiny-tooltip effect="light" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
         <template #default> <svg-icon :name="settingIcon" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
       </tiny-tooltip>
     </div>

diff --git a/packages/plugins/block/src/BlockPropertyForm.vue b/packages/plugins/block/src/BlockPropertyForm.vue
@@ -41,12 +41,12 @@
           </template>
           <template #operate="{ data }">
             <div class="operate-right-container">
-              <tiny-tooltip class="item" effect="dark" content="编辑" placement="top">
+              <tiny-tooltip class="item" effect="light" content="编辑" placement="top">
                 <span class="item-icon" @click.stop="handleEdit(data)">
                   <svg-icon name="to-edit"></svg-icon>
                 </span>
               </tiny-tooltip>
-              <tiny-tooltip class="item" effect="dark" content="删除" placement="top">
+              <tiny-tooltip class="item" effect="light" content="删除" placement="top">
                 <span class="item-icon" @click="del(data)">
                   <svg-icon name="delete"></svg-icon>
                 </span>

diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
@@ -81,7 +81,7 @@
                 <span class="icon">
                   <svg-icon name="to-edit" @click.stop="openEditor($event, data.row)"></svg-icon>
                 </span>
-                <tiny-tooltip class="item" effect="dark" placement="bottom" :open-delay="OPEN_DELAY.Default">
+                <tiny-tooltip class="item" effect="light" placement="bottom" :open-delay="OPEN_DELAY.Default">
                   <template #content>
                     <div>
                       复制键值（唯一标识）<br />

diff --git a/packages/plugins/state/src/EditorI18nTool.vue b/packages/plugins/state/src/EditorI18nTool.vue
@@ -28,7 +28,7 @@
     </div>
 
     <template #reference>
-      <tiny-tooltip content="插入国际化词条" placement="top" :open-delay="OPEN_DELAY.Default">
+      <tiny-tooltip content="插入国际化词条" effect="light" placement="top" :open-delay="OPEN_DELAY.Default">
         <svg-icon name="internationalization" @click="openPopover"></svg-icon>
       </tiny-tooltip>
     </template>

diff --git a/packages/settings/design/src/components/PropertyCanvas.vue b/packages/settings/design/src/components/PropertyCanvas.vue
@@ -21,12 +21,12 @@
         <div class="title-wrap">
           <h6>{{ titleProps.group.label?.zh_CN || '' }}</h6>
           <div>
-            <tiny-tooltip class="option-tips" effect="dark" content="编辑分组信息" placement="top">
+            <tiny-tooltip class="option-tips" effect="light" content="编辑分组信息" placement="top">
               <span class="item-icon">
                 <svg-icon name="to-edit" class="option-icon" @click.stop="handleEditGroup(titleProps.group)"></svg-icon>
               </span>
             </tiny-tooltip>
-            <tiny-tooltip class="option-tips" effect="dark" content="删除分组" placement="top">
+            <tiny-tooltip class="option-tips" effect="light" content="删除分组" placement="top">
               <span class="item-icon">
                 <svg-icon
                   name="delete"

diff --git a/packages/settings/design/src/components/SettingPanel.vue b/packages/settings/design/src/components/SettingPanel.vue
@@ -93,12 +93,12 @@
               </div>
             </template>
             <template #operate="{ data }">
-              <tiny-tooltip class="item operate-tips-item" effect="dark" content="编辑" placement="top">
+              <tiny-tooltip class="item operate-tips-item" effect="light" content="编辑" placement="top">
                 <span class="item-icon">
                   <svg-icon name="to-edit" @click.stop="handleEdit(data)"></svg-icon>
                 </span>
               </tiny-tooltip>
-              <tiny-tooltip class="item operate-tips-item" effect="dark" content="删除" placement="top">
+              <tiny-tooltip class="item operate-tips-item" effect="light" content="删除" placement="top">
                 <span class="item-icon">
                   <svg-icon name="delete" @click.stop="handleDelete(data)"></svg-icon>
                 </span>

diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue
@@ -59,7 +59,7 @@
     <div class="advnce-config">
       <label class="text-ellipsis-multiple">key</label>
       <div class="advanced-config-form-item">
-        <tiny-tooltip content="建议填写循环项中的唯一值（如item.id），如果填写为数字将不保存">
+        <tiny-tooltip content="建议填写循环项中的唯一值（如item.id），如果填写为数字将不保存" effect="light">
           <input-configurator
             v-model="state.loopKey"
             :placeholder="`默认为索引名：${getIndexName()}`"

diff --git a/packages/settings/props/src/components/groups/LifeCycle.vue b/packages/settings/props/src/components/groups/LifeCycle.vue
@@ -18,10 +18,10 @@
   <ul class="bind-life-cycle-list">
     <li v-for="(value, name, index) in state.bindLifeCycles" :key="index" class="life-cycle-item">
       <div>
-        <tiny-tooltip class="item" effect="dark" content="编辑" placement="top">
+        <tiny-tooltip class="item" effect="light" content="编辑" placement="top">
           <icon-setting class="icon" @click="openDialog(name)"></icon-setting>
         </tiny-tooltip>
-        <tiny-tooltip class="item" effect="dark" content="删除" placement="top">
+        <tiny-tooltip class="item" effect="light" content="删除" placement="top">
           <icon-del class="icon" @click="confirmClick(name)"></icon-del>
         </tiny-tooltip>
       </div>

diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -8,7 +8,7 @@
         >
           <span>背景图 & 渐变</span>
         </label>
-        <tiny-tooltip effect="dark" placement="top" content="添加背景图，线性渐变，径向渐变等">
+        <tiny-tooltip effect="light" placement="top" content="添加背景图，线性渐变，径向渐变等">
           <div class="background-image-icon" @click="openBackgroundImageModal($event, { isAdd: true })">
             <icon-plus></icon-plus>
           </div>

diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -245,7 +245,7 @@ export default {
     },
     effect: {
       type: String,
-      default: 'dark'
+      default: 'light'
     },
     placement: {
       type: String,

diff --git a/packages/settings/styles/src/components/buttons/ButtonGroup.vue b/packages/settings/styles/src/components/buttons/ButtonGroup.vue
@@ -1,6 +1,12 @@
 <template>
   <ul>
-    <tiny-tooltip v-for="(item, index) in props.options" :key="index" :content="item.tip" placement="top">
+    <tiny-tooltip
+      v-for="(item, index) in props.options"
+      :key="index"
+      :content="item.tip"
+      placement="top"
+      effect="light"
+    >
       <li :data-active="item.value === value ? '' : undefined" @click="handleClick(item.value)">
         <span v-if="item.icon" class="icon-wrap">
           <svg-icon v-if="item.icon" :name="item.icon"></svg-icon>

diff --git a/packages/settings/styles/src/components/effects/EffectGroup.vue b/packages/settings/styles/src/components/effects/EffectGroup.vue
@@ -28,7 +28,7 @@
         :options="outlineOptions"
         :modelValue="state.activedType"
         label-width="52"
-        effect="dark"
+        effect="light"
         placement="top"
         @update:modelValue="selectOutlineStyle"
       ></tabs-group-configurator>

diff --git a/packages/settings/styles/src/components/layout/GridBox.vue b/packages/settings/styles/src/components/layout/GridBox.vue
@@ -64,7 +64,7 @@
               @change="denseChange"
             />
             <label for="dense">Dense</label>
-            <tiny-tooltip :open-delay="500" content="dense 表示尽可能紧密填满，尽量不出现空格">
+            <tiny-tooltip :open-delay="500" content="dense 表示尽可能紧密填满，尽量不出现空格" effect="light">
               <icon-help-solid></icon-help-solid>
             </tiny-tooltip>
           </div>
@@ -81,12 +81,12 @@
                 <span class="text">{{ data.text }}</span>
               </template>
               <template #operate="{ data }">
-                <tiny-tooltip class="item" effect="dark" :open-delay="500" content="复制" placement="top">
+                <tiny-tooltip class="item" effect="light" :open-delay="500" content="复制" placement="top">
                   <span class="item-icon">
                     <icon-copy @click="copyItem(item.list, data)"></icon-copy>
                   </span>
                 </tiny-tooltip>
-                <tiny-tooltip class="item" effect="dark" :open-delay="500" content="删除" placement="top">
+                <tiny-tooltip class="item" effect="light" :open-delay="500" content="删除" placement="top">
                   <span class="item-icon">
                     <icon-del @click="deleteItem(item.list, data)"></icon-del>
                   </span>

diff --git a/packages/settings/styles/src/components/position/PositionGroup.vue b/packages/settings/styles/src/components/position/PositionGroup.vue
@@ -20,7 +20,7 @@
           <tiny-tooltip
             v-for="(item, index) in positionOptions"
             :key="index"
-            effect="dark"
+            effect="light"
             placement="top"
             :open-delay="500"
             :content="item.tip"

diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -222,7 +222,7 @@ export default {
     },
     effect: {
       type: String,
-      default: 'dark'
+      default: 'light'
     },
     placement: {
       type: String,

diff --git a/packages/settings/styles/src/components/typography/TypographyMore.vue b/packages/settings/styles/src/components/typography/TypographyMore.vue
@@ -96,7 +96,7 @@ export default {
     },
     effect: {
       type: String,
-      default: 'dark'
+      default: 'light'
     },
     placement: {
       type: String,

diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
@@ -692,10 +692,7 @@
 // 17、tooltip文字提示
 .tiny-tooltip.tiny-tooltip {
   &.tiny-tooltip__popper {
-    background: var(--te-common-bg-popover);
-    color: var(--te-common-text-primary);
-    box-shadow: 0 -2px 12px 0 var(--te-base-box-shadow-rgba-2);
-    &[class*='is-'] {
+    &[class*='is-light'] {
       background: var(--te-common-bg-popover);
       color: var(--te-common-text-primary);
       font-size: var(--te-base-font-size-base);

diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
@@ -55,7 +55,7 @@
                 </tiny-switch>
                 <tiny-tooltip
                   class="item"
-                  effect="dark"
+                  effect="light"
                   content="分支不存在的时候创建分支。若不开启，分支不存在时发布应用会失败。"
                   placement="top"
                   popper-class="help-tooltip"
@@ -76,7 +76,7 @@
                 </tiny-switch>
                 <tiny-tooltip
                   class="item"
-                  effect="dark"
+                  effect="light"
                   content="是否生成工程默认配置，如package.json等文件。如选择为否，只生成页面对应代码，不生成配置文件。"
                   placement="top"
                   popper-class="help-tooltip"