Alex Wright's questions

我在项目中使用 Tailwind CSS。为了简单起见，我使用了 中的颜色divs。HTML 代码如下：

<div class="wraper mt-5 grid gap-4 grid-cols-1 lg:grid-cols-2">
    <div class="grid gap-4 w-full grid-cols-1 xs:grid-cols-2 my-4">
        <div class="relative flex justify-center w-full h-[30rem] bg-yellow-400">

        </div>
        <div class="relative flex justify-center w-full h-[30rem] bg-violet-500">

        </div>
        <div class="adv relative w-full xs:col-span-2 h-[10rem] bg-gray-700">

        </div>
    </div>
    <div class="grid gap-4 w-full grid-cols-2 lg:mt-4">
        <div class="w-full h-10 bg-red-600">

        </div>
        <div class="w-full h-10 bg-green-500">

        </div>
        <div class="test bg-orange-800 w-full h-20 col-span-2">

        </div>
    </div>
</div>

config我在文件中使用的断点系统是：

screens: {
  'xs': '428px',
  'sm': '576px',
  'md': '768px',
  'lg': '992px',
  'xl': '1200px',
  'xxl': '1400px'
},

输出为：

如您所见，棕色元素与红色和绿色元素之间有很大空间（或间隙）。我不知道为什么会这样。此问题仅在 lg 屏幕尺寸中发生。在较小的屏幕尺寸下，一切正常。我的 HTML/CSS 代码有什么问题吗？

我想在鼠标悬停时更改元素的背景颜色。我有以下代码：

<Border.Style>
    <Style TargetType="Border">
        <Setter Property="Background" Value="Transparent" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True" >
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Border.Style>

Trigger设置背景颜色时，部分中没有不透明度属性Border.Style。我不想要 100% 白色背景。我该如何添加不透明度？

我想在鼠标进入边框区域时制作悬停效果。我有以下 XAML 代码：

<Border CornerRadius="5"
        Width="190"
        Height="40"
        Margin="0,5,0,0">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="35" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0"
                   Text="تجهیزات"
                   FlowDirection="RightToLeft"
                   VerticalAlignment="Center"
                   Margin="0,0,10,0">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.FontFamily" Value="{StaticResource Vazir}"/>
                    <Setter Property="TextBlock.FontSize" Value="14"/>
                    <Setter Property="TextBlock.Foreground" Value="White"/>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <Viewbox Grid.Column="1" Width="25" Height="25" Stretch="Uniform" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
            <Canvas Height="512" Width="512">
                <Path Fill="White" Data="M135.2 117.4L109.1 192l293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 144 0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L96 400l0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" />
            </Canvas>
        </Viewbox>
    </Grid>
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True" >
                    <Setter Property="Background" Value="White"  />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

问题是，鼠标进入文本和图像区域时会触发悬停效果，而不是整个 Border 元素区域。我该如何修复这个问题？

我在我的项目中使用 PostgreSQL。我的表中的主键列是长度为36的字符类型。我在后端生成guid并将它们存储在表中。我需要将列类型更改为 uuid 吗？能有同样的性能吗？

我使用以下基于类的拦截器来刷新用户令牌：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private inject: Injector) {}

    intercept(request: HttpRequest < any > , next: HttpHandler): Observable < HttpEvent < any >> {
        let tokenService = this.inject.get(TokenService);

        let authReq = request;
        authReq = this.AddTokenHeader(request, tokenService.getAccessToken())

        return next.handle(authReq).pipe(
            catchError(errorData => {
                if (errorData.status == 401) {
                    return this.handleRefreshToken(request, next);
                }
                return throwError(errorData);
            })
        );
    }

    AddTokenHeader(request: HttpRequest < any > , token: any) {
        return request.clone({
            headers: request.headers.set('Authorization', 'Bearer ' + token)
        });
    }

    handleRefreshToken(request: HttpRequest < any > , next: HttpHandler) {
        let tokenService = this.inject.get(TokenService);
        let authService = this.inject.get(AuthService);
        let sessionStorageService = this.inject.get(SessionStorageService);

        var refreshTokenVM = new RefreshTokenVM();
        refreshTokenVM.UserId = tokenService.getUserId();
        refreshTokenVM.RefreshToken! = tokenService.getRefreshToken() !;

        return tokenService.refreshToken(refreshTokenVM).pipe(
            switchMap((data: any) => {
                sessionStorageService.saveData('accessToken', data.accessToken);
                sessionStorageService.saveData('refreshToken', data.refreshToken);
                return next.handle(this.AddTokenHeader(request, data.accessToken))
            }),
            catchError(errorData => {
                authService.logout();
                return throwError(errorData);
            })
        );
    }
}

在 Angular 17 中，我们必须使用函数式拦截器。我尝试将上面的代码转换为功能拦截器：

export const authInterceptor: HttpInterceptorFn = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> => {
  const clonedRequest = request.clone({
    setHeaders: {
      Authorization: 'Bearer ' + 'token',
    }
  });
  return next(clonedRequest).pipe(
    catchError(errorData => {
      if (errorData.status == 401) {

      }
      return throwError(() => errorData);
    })
  );
};

问题是我无法注入tokenService拦截器函数（我将令牌存储在SessionStrorage）。另外，我不知道如何handleRefreshToken在功能拦截器中集成功能。我怎么解决这个问题？