release: v2.1.2

Author: dongwei1125

CHANGELOG.md

@@ -1,5 +1,18 @@
 ## 更新日志
 
+### 2.1.2
+
+*2024-07-10*
+
+#### Docs 📝
+
+- 暗黑开关新增键盘`enter`切换
+- 新增外部链接图标和自适应效果
+
+#### Fix 🐛
+
+- 断点隐藏类媒体查询范围异常
+
 ### 2.1.1
 
 *2024-07-02*
@@ -45,6 +58,14 @@
 
 - 修复`red`颜色提取异常问题
 
+### 1.0.3
+
+*2024-04-25*
+
+#### Docs 📝
+
+- 新增使用示例
+
 ### 1.0.2
 
 *2023-07-05*

README.en.md

@@ -1,6 +1,6 @@
-<h1 style="color: #409eff; text-align: center; font-size: 50px">Element-theme-darkplus</h1>
+<h1 align="center">Element-theme-darkplus</h1>
 
-<p style='text-align: center'>
+<p align="center">
   <a href="https://github.com/ElemeFE/element">
     <img src="https://img.shields.io/badge/element--ui-2.15.14-blue.svg" alt="element-ui" />
   </a>
@@ -36,7 +36,7 @@ npm i element-theme-darkplus -S
 ## Import
 
 ```javascript
-// webpack
+// Webpack
 import 'element-theme-darkplus/lib/index.css';
 
 // CDN
@@ -46,6 +46,7 @@ import 'element-theme-darkplus/lib/index.css';
 ## Import on demand
 
 ```javascript
+// Webpack
 import 'element-theme-darkplus/lib/input.css';
 
 // CDN
@@ -54,7 +55,7 @@ import 'element-theme-darkplus/lib/input.css';
 
 ## Switch
 
-If you have a chalk theme, a dark theme, two themes free to switch, then this way is best for you.
+If you have a chalk theme, a dark theme, two themes free to switch, then the following is best for you.
 
 ```javascript
 import 'element-ui/lib/theme-chalk/index.css';
@@ -97,9 +98,9 @@ The progress bar component [Progress](https://github.com/ElemeFE/element/blob/ma
 
 Although the two components can pass null values to reset properties to support dark themes, for students who are not concerned about this feature, it is unclear why properties such as `text-color=""` are passed in, which undoubtedly adds mental burden at the development level.
 
-The style approach cannot solve the fundamental problem of `Rate` and `Progress`.
+Um The style cannot solve the fundamental problem of `Rate` and `Progress`.
 
-We have considered another approach, which is to redefine the `Rate` and `Progress` components, but without compromising the scalability and uniqueness of the original components. Therefore, we adopted the method of inheriting the original components and added an intermediate layer in `javascript` to help users initially empty the relevant color `props`.
+Can you redefine the `Rate` and `Progress` components? Without breaking the extensibility and uniqueness of the original component, adopted the method of inheriting the original component and make a middle layer in `javascript` to help the user initially empty the related colors `props`.
 
 ### Import
 
@@ -131,7 +132,7 @@ Vue.component(Rate.name, Darken(Rate))
 
 ### How to persist themes, update themes responsive to the system?
 
-The theme `switch` in [The preview page](https://dongwei1125.github.io/theme-dark) has added common dark theme functions, such as browser caching to permanently save the user's frequently used theme status, dynamically switching theme styles according to operating system presets, and media query style transition. You can refer to the component [ThemeToggle](https://github.com/dongwei1125/theme-dark/tree/master/docs/components/ThemeToggle/dark).
+The theme `switch` in [The preview page](https://dongwei1125.github.io/theme-dark) has added common dark theme functions, such as browser caching to permanently save the user's frequently used theme status, dynamically switching theme styles according to operating system presets, and media query style transition. You can refer to the component [ThemeToggle](https://github.com/dongwei1125/theme-dark/tree/master/docs/components/ThemeToggle/dark) or [Sample](https://codepen.io/dongwei1125/pen/dyExzaP).
 
 ### Persistent loading for the first time in dark mode with white screen?
 

README.md

@@ -1,6 +1,6 @@
-<h1 style="color: #409eff; text-align: center; font-size: 50px">Element-theme-darkplus</h1>
+<h1 align="center">Element-theme-darkplus</h1>
 
-<p style='text-align: center'>
+<p align="center">
   <a href="https://github.com/ElemeFE/element">
     <img src="https://img.shields.io/badge/element--ui-2.15.14-blue.svg" alt="element-ui" />
   </a>
@@ -36,7 +36,7 @@ npm i element-theme-darkplus -S
 ## 引入
 
 ```javascript
-// webpack
+// Webpack
 import 'element-theme-darkplus/lib/index.css';
 
 // CDN
@@ -46,6 +46,7 @@ import 'element-theme-darkplus/lib/index.css';
 ## 部分引入
 
 ```javascript
+// Webpack
 import 'element-theme-darkplus/lib/input.css';
 
 // CDN
@@ -54,7 +55,7 @@ import 'element-theme-darkplus/lib/input.css';
 
 ## 切换式
 
-如果你准备了一套白垩主题，一套暗黑主题，两种主题自由切换，那么此方式最适合你。
+如果你准备了一套白垩主题，一套暗黑主题，两种主题自由切换，那么以下最适合你。
 
 ```javascript
 import 'element-ui/lib/theme-chalk/index.css';
@@ -70,15 +71,15 @@ import `element-theme-darkplus/lib/input.color.css`;
 
 ## 高级
 
-评分组件 [Rate](https://github.com/ElemeFE/element/blob/master/packages/rate/src/main.vue) 较为特殊，`Element`内部与颜色相关的`props`均定义了默认值，且`template`模板中都采用内联样式，导致外部主题样式无法覆盖。
+评分组件 [Rate](https://github.com/ElemeFE/element/blob/master/packages/rate/src/main.vue) 较为特殊，`Element`内部与颜色相关`props`均定义了默认值，且`template`模板中都采用内联样式，导致外部主题样式无法覆盖。
 
 | `Props` | `默认值` |
 | --- | --- |
 | `void-color` | `#c6d1de` |
 | `disabled-void-color` | `#eff2f7` |
 | `text-color` | `#1f2d3d` |
 
-可传空值重置相应的`props`值使主题生效。
+可传空值重置相应`props`值使主题生效。
 
 ```html
 <el-rate :value="3" show-text void-color="" text-color="" />
@@ -97,9 +98,9 @@ import `element-theme-darkplus/lib/input.color.css`;
 
 虽然两组件可以传空值重置属性以支持暗黑主题，而对于不关心此功能的同学，却不清楚为什么会传入诸如`text-color=""`这样的属性，这无疑在开发层面徒增了心智负担。
 
-样式方式是无法解决`Rate`和`Progress`根本性问题。
+嗯`...`样式么法解决`Rate`和`Progress`根本性问题了。
 
-我们考虑了另外一种方式，即重新定义`Rate`和`Progress`组件，但又不能破坏原组件的拓展性和唯一性，所以我们采用继承原始组件的方式，在`javascript`里做了一个中间层，帮助用户初始置空相关颜色`props`。
+重新定义`Rate`和`Progress`组件可以吗？还不能破坏原组件的拓展性和唯一性，则采用继承原始组件并在`javascript`里做了一个中间层，帮助用户初始置空相关颜色`props`。
 
 ### 全量引入
 
@@ -131,7 +132,7 @@ Vue.component(Rate.name, Darken(Rate))
 
 ### 如何持久化主题、跟随系统响应式更新主题等？
 
-[预览页](https://dongwei1125.github.io/theme-dark) 中主题切换开关`switch`添加了常见的暗黑主题功能，例如浏览器缓存永久保存用户常用主题状态、跟随操作系统预设动态切换主题风格、媒体查询式主题风格过渡等，可参考组件 [ThemeToggle](https://github.com/dongwei1125/theme-dark/tree/master/docs/components/ThemeToggle/dark)。
+[预览页](https://dongwei1125.github.io/theme-dark) 中主题切换开关`switch`添加了常见的暗黑主题功能，例如浏览器缓存永久保存用户常用主题状态、跟随操作系统预设动态切换主题风格、媒体查询式主题风格过渡等，可参考组件 [ThemeToggle](https://github.com/dongwei1125/theme-dark/tree/master/docs/components/ThemeToggle/dark) 和 [示例](https://codepen.io/dongwei1125/pen/dyExzaP)。
 
 ### 持久化首次载入暗黑模式白屏？
 

docs/App.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="app">
     <div class="navbar">
-      <h1>Element-theme-darkplus</h1>
+      <a href="">
+        <h1>Element-theme-darkplus</h1>
+      </a>
 
       <div>
-        <header-search />
-        <theme-toggle />
-        <git-hub />
-        <gitee />
-        <npm />
+        <fuse-search class="hidden-xxs hidden-xs hidden-sm hidden-md" />
+        <theme-toggle class="hidden-xxs" />
+        <git-hub class="hidden-xxs hidden-xs hidden-sm hidden-lg hidden-xl" />
+        <gitee class="hidden-xxs hidden-xs hidden-sm hidden-lg hidden-xl" />
+        <npm class="hidden-xxs hidden-xs hidden-sm hidden-lg hidden-xl" />
+        <link-dropdown class="hidden-xxs hidden-xs hidden-md hidden-lg hidden-xxl" />
       </div>
     </div>
 
@@ -73,11 +76,12 @@
 </template>
 
 <script>
-import HeaderSearch from './components/HeaderSearch.vue'
+import FuseSearch from './components/FuseSearch.vue'
 import ThemeToggle from './components/ThemeToggle/index.vue'
 import GitHub from './components/GitHub.vue'
 import Gitee from './components/Gitee.vue'
 import Npm from './components/Npm.vue'
+import LinkDropdown from './components/LinkDropdown.vue'
 
 import AlertExample from './examples/Alert.vue'
 import AutocompleteExample from './examples/Autocomplete.vue'
@@ -138,11 +142,12 @@ import UploadExample from './examples/Upload.vue'
 export default {
   name: 'App',
   components: {
-    HeaderSearch,
+    FuseSearch,
+    ThemeToggle,
     GitHub,
     Gitee,
     Npm,
-    ThemeToggle,
+    LinkDropdown,
     AlertExample,
     AutocompleteExample,
     AvatarExample,
@@ -227,27 +232,33 @@ html.dark .navbar {
   background-image: radial-gradient(transparent 1px, #141414 1px);
 }
 
+.navbar > a {
+  text-decoration: none;
+}
+
 .navbar h1 {
   margin: 0;
   color: #409eff;
   font-size: 24px;
-  font-weight: 500;
-  font-family: 'Segoe UI';
 }
 
 .navbar > div {
   display: flex;
   align-items: center;
 }
 
+.navbar .fuse-search {
+  margin: 0 12px;
+}
+
 .navbar .theme-toggle {
-  padding: 0 12px;
+  margin: 0 12px;
 }
 
-.navbar a {
+.navbar div a {
   display: inline-block;
   height: 100%;
-  padding: 0 12px;
+  margin: 0 12px;
   font-size: 15px;
   font-weight: bold;
   color: currentColor;
@@ -272,3 +283,57 @@ html.dark .content >>> h2 {
   color: #cfd3dc;
 }
 </style>
+
+<style scoped>
+/* 
+  xxs <439
+  xs ≥439
+  sm ≥459
+  md ≥580
+  lg ≥673
+  xl ≥693
+  xxl ≥814
+*/
+
+@media (max-width: 438px) {
+  .hidden-xxs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 439px) and (max-width: 458px) {
+  .hidden-xs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 459px) and (max-width: 579px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 580px) and (max-width: 672px) {
+  .hidden-md {
+    display: none !important;
+  }
+}
+
+@media (min-width: 673px) and (max-width: 692px) {
+  .hidden-lg {
+    display: none !important;
+  }
+}
+
+@media (min-width: 693px) and (max-width: 813px) {
+  .hidden-xl {
+    display: none !important;
+  }
+}
+
+@media (min-width: 814px) {
+  .hidden-xxl {
+    display: none !important;
+  }
+}
+</style>