fix: ui fix

996852302 · Jan 11, 2024 · 51ef1d4 · 51ef1d4
1 parent 3557b31
commit 51ef1d4
Show file tree

Hide file tree

Showing 18 changed files with 47 additions and 50 deletions.
diff --git a/app/(main)/(client-layout)/checkout/cart/page.jsx b/app/(main)/(client-layout)/checkout/cart/page.jsx
@@ -122,18 +122,18 @@ const CartPage = () => {
 
         {/* to Shipping */}
         <section className="fixed bottom-0 left-0 right-0 z-10 flex items-center justify-between px-3 py-3 bg-white border-t border-gray-300 shadow-3xl lg:hidden">
-          <Button className="w-1/2" onClick={handleRoute}>
-            继续
-          </Button>
           <div>
             <span className="font-light">总计购物车</span>
             <div className="flex items-center">
               <span className="text-sm farsi-digits">
                 {formatNumber(totalPrice - totalDiscount)}
               </span>
-              <span className="mr-1 w-7 h-7">¥</span>
+              <span className="ml-1">¥</span>
             </div>
           </div>
+          <Button className="w-1/2" onClick={handleRoute}>
+            继续
+          </Button>
         </section>
       </main>
     </>

diff --git a/app/(main)/(client-layout)/checkout/shipping/page.jsx b/app/(main)/(client-layout)/checkout/shipping/page.jsx
@@ -81,7 +81,7 @@ const ShippingPage = () => {
       const { openAddressModal } = addressModalProps || {}
       return (
         <button type="button" onClick={openAddressModal} className="flex items-center ml-auto">
-          <span className="text-base text-sky-500">改变| 编辑</span>
+          <span className="text-base text-sky-500">改变 | 编辑</span>
           <Icons.ArrowRight2 className="icon text-sky-500" />
         </button>
       )
@@ -113,10 +113,7 @@ const ShippingPage = () => {
 
       <main className="py-2 mx-auto space-y-3 xl:mt-28 container">
         {/* header */}
-        <header className="lg:border lg:border-gray-200 lg:rounded-lg">
-          <Link href="/">
-            <div className="w-24 h-12 mx-auto bg-red-200"></div>
-          </Link>
+        <header className="lg:border lg:border-gray-200 lg:rounded-lg py-2">
           <div className="flex items-center justify-evenly">
             <Link href="/checkout/cart" className="flex flex-col items-center gap-y-2">
               <Icons.Cart className="text-red-300 icon" />
@@ -151,12 +148,12 @@ const ShippingPage = () => {
             {/* products */}
             <section className="px-2 py-4 mx-3 border border-gray-200 rounded-lg lg:mx-0 lg:mt-3 ">
               <div className="flex mb-5">
-                <Image src="/icons/car.png" className="ml-4" width={40} height={40} alt="提交" />
+                <Image src="/icons/car.png" className="mr-4" width={40} height={40} alt="icon" />
                 <div>
                   <span className="text-base text-black">正常发货</span>
                   <span className="block">有现货</span>
                 </div>
-                <span className="inline-block px-2 py-1 mr-3 bg-gray-100 rounded-lg farsi-digits h-fit">
+                <span className="inline-block px-2 py-1 ml-3 bg-gray-100 rounded-lg farsi-digits h-fit">
                   {formatNumber(totalItems)} 商品
                 </span>
               </div>
@@ -166,7 +163,7 @@ const ShippingPage = () => {
                     <ResponsiveImage dimensions="w-28 h-28" src={item.img.url} alt={item.name} />
 
                     {item.color && (
-                      <div className="flex items-center gap-x-2 mr-3 mt-1.5">
+                      <div className="flex items-center gap-x-2 ml-3 mt-1.5">
                         <span
                           className="inline-block w-4 h-4 shadow rounded-xl"
                           style={{ background: item.color.hashCode }}

diff --git a/app/(main)/admin/(dashboard-layout)/details/[id]/page.jsx b/app/(main)/admin/(dashboard-layout)/details/[id]/page.jsx
@@ -292,7 +292,7 @@ const DetailsContentPage = ({ params: { id } }) => {
                           type="radio"
                           id="none"
                           value="none"
-                          className="ml-1"
+                          className="mr-1"
                           {...register('optionsType')}
                         />
                         <label htmlFor="none">默认</label>
@@ -302,7 +302,7 @@ const DetailsContentPage = ({ params: { id } }) => {
                           type="radio"
                           id="colors"
                           value="colors"
-                          className="ml-1"
+                          className="mr-1"
                           {...register('optionsType')}
                         />
                         <label htmlFor="colors">根据颜色</label>
@@ -312,7 +312,7 @@ const DetailsContentPage = ({ params: { id } }) => {
                           type="radio"
                           id="sizes"
                           value="sizes"
-                          className="ml-1"
+                          className="mr-1"
                           {...register('optionsType')}
                         />
                         <label htmlFor="sizes">根据尺寸</label>

diff --git a/app/(main)/admin/(dashboard-layout)/products/page.jsx b/app/(main)/admin/(dashboard-layout)/products/page.jsx
@@ -216,7 +216,7 @@ const Products = () => {
                 <input
                   type="text"
                   placeholder="产品名称..."
-                  className="flex-grow p-1 text-right input"
+                  className="flex-grow p-2 text-left input"
                   value={search}
                   onChange={handleSearchChange}
                 />

diff --git a/app/(main)/profile/user-history/page.jsx b/app/(main)/profile/user-history/page.jsx
@@ -36,7 +36,7 @@ const UserHistory = () => {
                     alt={item.title}
                   />
 
-                  <h5 className="flex-1 px-3 text-right text-gray-800 leadiri-6 md:h-32">
+                  <h5 className="flex-1 px-3 text-left text-gray-800 leadiri-6 md:h-32">
                     {truncate(item.title, 80)}
                   </h5>
                 </Link>

diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -36,7 +36,7 @@ export default function Footer() {
         <div className="space-y-8 lg:flex lg:items-start lg:justify-between">
           {/* socials */}
           <div className="flex items-center justify-between">
-            <p className="lg:ml-20">更多联系方式！</p>
+            <p className="lg:mr-20">更多联系方式！</p>
             <div className="flex gap-x-5">
               <Icons.Twitter className="w-8 h-8 text-gray-400" />
               <Icons.Linkedin className="w-8 h-8 text-gray-400" />

diff --git a/components/ProfileAside.js b/components/ProfileAside.js
@@ -44,7 +44,7 @@ function ProfileAside() {
   return (
     <aside className="sticky mt-6 lg:border lg:border-gray-200 lg:rounded-md lg:pt-4 lg:top-6 xl:top-[136px]">
       <div className="flex items-center justify-between px-5 py-2 ">
-        <Person className="w-12 h-12" />
+        <Person className="w-12 h-12 mr-3" />
         <div className="flex flex-col ml-auto mr-3 gap-y-1">
           {isLoading ? (
             <>

diff --git a/components/Sidebar.jsx b/components/Sidebar.jsx
@@ -91,7 +91,7 @@ export default function Sidebar() {
                               <Disclosure key={category._id}>
                                 {({ open }) => (
                                   <>
-                                    <Disclosure.Button className="flex items-center justify-between px-4 py-2 w-full !mt-0 pr-7">
+                                    <Disclosure.Button className="flex items-center justify-between px-4 py-2 w-full !mt-0 pl-7">
                                       <span
                                         className={`font-medium text-md ${
                                           open ? 'text-red-400' : 'text-gray-600'
@@ -118,14 +118,14 @@ export default function Sidebar() {
                                         onClick={handleClose}
                                       >
                                         此类别所有分类
-                                        <Icons.ArrowLeft className="text-gray-500 icon" />
+                                        <Icons.ArrowRight2 className="text-gray-500 icon" />
                                       </Link>
                                       {category.children &&
                                         category.children.map(category => (
                                           <Link
                                             key={category._id}
                                             href={`/products?category=${category.slug}`}
-                                            className="pr-9 py-2.5 my-2 font-normal tracking-wide block"
+                                            className="pl-9 py-2.5 my-2 font-normal tracking-wide block"
                                             onClick={handleClose}
                                           >
                                             {category.name}

diff --git a/components/cart/CartDropdown.jsx b/components/cart/CartDropdown.jsx
@@ -72,7 +72,7 @@ export default function CartDropdown() {
                       <span className="text-sm farsi-digits">
                         {formatNumber(totalPrice - totalDiscount)}
                       </span>
-                      <span className="mr-1">¥</span>
+                      <span className="ml-1">¥</span>
                     </div>
                   </div>
 

diff --git a/components/cart/CartInfo.jsx b/components/cart/CartInfo.jsx
@@ -19,7 +19,7 @@ const CartInfo = props => {
         <span className="text-sm farsi-digits">商品价格({formatNumber(totalItems)})</span>
         <div className="flex-center">
           <span className="farsi-digits">{formatNumber(totalPrice)}</span>
-          <span className="mr-1 w-7 h-7">¥</span>
+          <span className="ml-1">¥</span>
         </div>
       </div>
 
@@ -28,7 +28,7 @@ const CartInfo = props => {
         <span>总计购物车</span>
         <div className="flex-center">
           <span className="text-sm farsi-digits">{formatNumber(totalPrice - totalDiscount)}</span>
-          <span className="mr-1 w-7 h-7">¥</span>
+          <span className="ml-1">¥</span>
         </div>
       </div>
 
@@ -38,13 +38,13 @@ const CartInfo = props => {
 
       {/* total cart profit */}
       <div className="flex justify-between">
-        <span className="text-red-500">您从购买中获得的利润</span>
+        <span className="text-red-500">您从购买中省去的金额</span>
         <div className="flex-center gap-x-1">
           <span className="text-red-500 text-sm farsi-digits">
             (% {((totalDiscount / totalPrice) * 100).toFixed(1)})
           </span>
           <span className="text-red-500 farsi-digits">{formatNumber(totalDiscount)}</span>
-          <span className="mr-1 w-7 h-7">¥</span>
+          <span className="ml-1 text-red-500">¥</span>
         </div>
       </div>
 

diff --git a/components/common/Checkbox.js b/components/common/Checkbox.js
@@ -1,5 +1,5 @@
-import React, { ForwardRefRenderFunction, ForwardedRef, Ref, forwardRef } from 'react'
-import { Control, useController } from 'react-hook-form'
+import React, { forwardRef } from 'react'
+import { useController } from 'react-hook-form'
 
 const BaseCheckbox = (props, ref) => {
   const { label, name, checked, onChange } = props

diff --git a/components/order/OrderCard.jsx b/components/order/OrderCard.jsx
@@ -82,8 +82,8 @@ const OrderCard = props => {
         </div>
         <div className="flex flex-wrap justify-between lg:px-3">
           <div>
-            <span>订单号：</span>
-            <span className="mr-2 text-sm text-black">{order._id}</span>
+            <span>订单号:</span>
+            <span className="ml-2 text-sm text-black">{order._id}</span>
           </div>
           <div className="flex items-center gap-x-1">
             <span className="text-black farsi-digits">

diff --git a/components/product/AddColors.js b/components/product/AddColors.js
@@ -72,7 +72,7 @@ const AddColors = props => {
               <input className="text-field__input w-28" {...register(`colors.${index}.name`)} />
               <input
                 type="color"
-                className="w-8 h-8 mr-3 shadow-lg "
+                className="w-8 h-8 ml-3 shadow-lg "
                 {...register(`colors.${index}.hashCode`)}
               />
             </div>

diff --git a/components/product/Description.jsx b/components/product/Description.jsx
@@ -15,7 +15,7 @@ const Description = props => {
   return (
     <section>
       <div className="px-3 lg:max-w-3xl xl:max-w-5xl">
-        <h4 className="mb-3 lg:border-b-2 lg:border-red-500 w-min">介绍</h4>
+        <h4 className="mb-3 lg:border-b-2 lg:border-red-500 w-fit">介绍</h4>
         <p className="text-xs leading-6 tracking-wider text-gray-600 lg:text-sm lg:leading-8">
           {isShowDesc ? description : truncate(description, 300)}
         </p>
@@ -26,7 +26,7 @@ const Description = props => {
             onClick={showDescHandlers.toggle}
           >
             {isShowDesc ? '关闭' : '查看更多'}
-            <Icons.ArrowLeft className="icon text-sky-400" />
+            <Icons.ArrowRight2 className="icon text-sky-400" />
           </button>
         )}
       </div>

diff --git a/components/product/Info.jsx b/components/product/Info.jsx
@@ -6,7 +6,7 @@ const Info = props => {
   return (
     <section className="px-4 pb-2">
       <h4 className="my-3 lg:mt-6">属性</h4>
-      <ul className="mr-6 space-y-2 list-disc">
+      <ul className="ml-6 space-y-2 list-disc">
         {infos.map((item, i) => (
           <li key={i} className="tracking-wide text-gray-500">
             <span className="ml-2 font-light">{item.title} :</span>

diff --git a/components/product/Specification.jsx b/components/product/Specification.jsx
@@ -13,9 +13,9 @@ const Specification = props => {
 
   //? Render(s)
   return (
-    <section className="px-4 ">
+    <section className="px-4">
       <div className="lg:max-w-3xl xl:max-w-5xl lg:flex lg:gap-x-20">
-        <h4 className="mb-3 h-fit w-min lg:border-b-2 lg:border-red-500">规格</h4>
+        <h4 className="mb-3 h-fit w-fit lg:border-b-2 lg:border-red-500">规格</h4>
         <ul className="space-y-4 lg:mt-10">
           {renderSpecification.map((item, i) => {
             if (!item.value) return
@@ -33,17 +33,17 @@ const Specification = props => {
               )
           })}
         </ul>
+        {specification.length > 7 && (
+          <button
+            type="button"
+            className="flex items-center py-2 text-sm text-sky-400 self-end flex-nowrap"
+            onClick={showSpecHandlers.toggle}
+          >
+            {isShowSpec ? '关闭' : '查看更多'}
+            <Icons.ArrowRight2 className="icon text-sky-400 " />
+          </button>
+        )}
       </div>
-      {specification.length > 7 && (
-        <button
-          type="button"
-          className="flex items-center py-2 text-sm text-sky-400"
-          onClick={showSpecHandlers.toggle}
-        >
-          {isShowSpec ? '关闭' : '查看更多'}
-          <Icons.ArrowLeft className="icon text-sky-400" />
-        </button>
-      )}
     </section>
   )
 }

diff --git a/components/review/ReveiwCard.jsx b/components/review/ReveiwCard.jsx
@@ -108,7 +108,7 @@ const ReveiwCard = props => {
           />
 
           <span
-            className={`farsi-digits w-5 h-5 text-center pt-0.5 inline-block rounded-md text-white  mr-10 lg:mr-20 ${
+            className={`farsi-digits w-5 h-5 text-center pt-0.5 inline-block rounded-md text-white  ml-10 lg:ml-20 ${
               item.rating <= 2 ? 'bg-red-500' : item.rating === 3 ? 'bg-amber-500' : 'bg-green-500'
             }`}
           >

diff --git a/components/review/Reviews.jsx b/components/review/Reviews.jsx
@@ -51,7 +51,7 @@ const Reviews = props => {
           <h4 className="mb-3 lg:border-b-2 lg:border-red-500">意见</h4>
           <span className="text-xs text-sky-500 farsi-digits">{numReviews} 观点看法</span>
         </div>
-        <div className="lg:mr-36">
+        <div className="lg:ml-16">
           <div className="mb-8">
             <button
               type="button"
@@ -60,7 +60,7 @@ const Reviews = props => {
             >
               <Icons.Comment className="icon" />
               <span className="text-sm text-black ">写下您对该产品的看法</span>
-              <Icons.ArrowRight2 className="mr-auto icon" />
+              <Icons.ArrowRight2 className="ml-auto icon" />
             </button>
             <p className="mt-6 text-xs text-gray-500">
               确认意见后，通过访问俱乐部任务页面获取分数。
-Original file line number
+Diff line change
@@ Expand Up / @@ -108,7 +108,7 @@ const ReveiwCard = props => { @@
               />
               <span
-                className={`farsi-digits w-5 h-5 text-center pt-0.5 inline-block rounded-md text-white  mr-10 lg:mr-20 ${
+                className={`farsi-digits w-5 h-5 text-center pt-0.5 inline-block rounded-md text-white  ml-10 lg:ml-20 ${
                   item.rating <= 2 ? 'bg-red-500' : item.rating === 3 ? 'bg-amber-500' : 'bg-green-500'
                 }`}
               >
@@ Expand Down @@