feat: Built in tailwindcss

package.json

@@ -59,9 +59,11 @@
     "ng-zorro-antd": "^18.1.1",
     "nodemailer": "^6.9.15",
     "nprogress": "^0.2.0",
+    "postcss": "^8.4.47",
     "qs": "^6.13.0",
     "rough-notation": "^0.5.1",
     "rxjs": "~7.8.1",
+    "tailwindcss": "^3.4.11",
     "tslib": "^2.7.0",
     "zone.js": "~0.15.0"
   },

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/assets/styles/nprogress.css

@@ -0,0 +1,76 @@
+/* NProgress Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 25px;
+  right: 25px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/assets/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/fixbar/index.component.html

@@ -48,7 +48,10 @@
     nz-tooltip
     [nzTooltipTitle]="collapsed ? $t('_collapse') : $t('_put')"
   >
-    <i class="iconfont iconweibiaoti25 collapse" [class.active]="collapsed"></i>
+    <i
+      class="iconfont iconweibiaoti25 collapse-icon"
+      [class.active]="collapsed"
+    ></i>
   </div>
 
   <div

src/components/fixbar/index.component.scss

@@ -51,7 +51,7 @@
     font-weight: bold;
   }
 
-  .collapse {
+  .collapse-icon {
     transform: rotate(-270deg);
     &.active {
       transform: rotate(-360deg);

src/components/fixbar/index.component.ts

@@ -75,7 +75,7 @@ export class FixbarComponent {
     private activatedRoute: ActivatedRoute
   ) {
     if (this.isDark) {
-      document.documentElement.classList.add('dark-container')
+      document.documentElement.classList.add('dark-container', 'dark')
     }
 
     const url = this.router.url.split('?')[0]
@@ -142,6 +142,7 @@ export class FixbarComponent {
       String(Number(this.isDark))
     )
     document.documentElement.classList.toggle('dark-container')
+    document.documentElement.classList.toggle('dark')
 
     if (this.isDark) {
       this.removeBackground()

src/components/footer/template.ts

@@ -1,36 +1,36 @@
 const t: Record<string, any> = {
   footTemplate1: `
-<div class="foot-template1 dark-bg dark-border-color">
-  <div class="template1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+<div class="bg-white py-8 px-8 mx-auto text-left dark-bg dark-border-color">
+  <div
+    style="width: 1050px"
+    class="max-w-full mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+  >
     <div>
-      <div class="title dark-white">联系方式</div>
-      <div class="text dark-white-700">问题反馈：[email protected]</div>
-      <div class="text dark-white-700">微信授权：xjh22222228</div>
+      <div class="dark-white text-base font-bold mb-8">联系方式</div>
+      <div class="text-gray-600 dark-white-700 mb-6">
+        问题反馈：xjh22222228&commat;gmail.com
+      </div>
+      <div class="text-gray-600 dark-white-700 mb-6">
+        微信授权：xjh22222228
+      </div>
     </div>
 
     <div>
-      <div class="title dark-white">网站信息</div>
-      <div class="text dark-white-700">共收录$\{total}个网站</div>
-      <div class="text">
-        <a
-          class="applyweb"
-        >
-          申请收录
-        </a>
+      <div class="dark-white text-base font-bold mb-8">网站信息</div>
+      <div class="text-gray-600 dark-white-700 mb-6">共收录 $\{total} 个网站</div>
+      <div class="mb-6">
+        <a class="applyweb"> 申请收录 </a>
       </div>
     </div>
 
     <div>
-      <div class="title dark-white">技术支持</div>
-      <div class="text">
-        <a
-          href="https://github.com/xjh22222228/nav"
-          target="_blank"
-        >
+      <div class="dark-white text-base font-bold mb-8">技术支持</div>
+      <div class="mb-6">
+        <a href="https://github.com/xjh22222228/nav" target="_blank">
           Nav
         </a>
       </div>
-      <div class="text">
+      <div class="mb-6">
         <a
           href="https://github.com/xjh22222228/beautiful-window"
           target="_blank"
@@ -41,31 +41,6 @@ const t: Record<string, any> = {
     </div>
   </div>
 </div>
-<!-- UI Style -->
-<style>
-.foot-template1 {
-  margin-top: 2rem;
-  padding: 2rem 1rem 0 1rem;
-  text-align: left;
-  background-color: #fff;
-  border-top: 1px solid #e2e2e2;
-}
-.foot-template1 .template1 {
-  max-width: 1150px;
-  margin: 0 auto;
-}
-.foot-template1 .title {
-  font-size: 1rem;
-  font-weight: bold;
-  color: #000;
-  margin-bottom: 2rem;
-}
-.foot-template1 .text {
-  font-size: 0.9rem;
-  margin-bottom: 2rem;
-  color: rgba(18, 20, 28, 0.7);
-}
-</style>  
 `,
 
   footTemplate2: `

src/components/login/login.component.html

@@ -7,7 +7,13 @@
 >
   <ng-container *nzModalContent>
     <p>{{ $t('_inputTokenMsg') }}</p>
-    <input nz-input [(ngModel)]="token" autofocus (keyup)="onKey($event)" />
+    <input
+      autofocus
+      nz-input
+      [(ngModel)]="token"
+      autofocus
+      (keyup)="onKey($event)"
+    />
     <p *ngIf="!isSelfDevelop" style="margin-top: 15px">
       {{ $t('_getToken')
       }}<a

src/components/swiper/index.component.html

@@ -12,7 +12,7 @@
     >
       <img
         class="bgimg"
-        [class.h100]="height > 0"
+        [class.h-full]="height > 0"
         [src]="item.src"
         draggable="false"
       />

src/locale/english.ts

@@ -252,6 +252,7 @@ const english: Record<string, any> = {
   _footTemplate2: 'Template 2',
   _footTemplateDesc:
     'All bottom HTML is universal, copy the obtained template code to the desired theme or global setting, existing variable: ${total} = Number of websites; ${hostname} = Domain name; ${year} = This year; class="applyweb" = Add web',
+  _builtTailwind: `System is already built-in https://www.tailwindcss.cn/ You don't need to write`,
 }
 
 export default english

src/locale/zh_CN.ts

@@ -243,6 +243,7 @@ const zhCN: Record<string, any> = {
   _footTemplate2: '模版2',
   _footTemplateDesc:
     '所有底部HTML通用,将获取的模版代码拷贝到需要设置的主题或全局，现有变量：${total} = 网站数量； ${hostname} = 域名；${year} = 今年年份；class="applyweb" = 申请收录',
+  _builtTailwind: '系统已内置 https://www.tailwindcss.cn，您无需书写样式',
 }
 
 export default zhCN

src/services/jump.ts

@@ -15,7 +15,7 @@ export class JumpService {
     e?.stopPropagation?.()
     e?.preventDefault?.()
 
-    if (typeof url !== 'string') {
+    if (typeof url !== 'string' || !url) {
       return
     }