Início / user-15167500

rozsazoltan's questions

Martin Hope
rozsazoltan
Asked: 2024-11-13 09:10:48 +0800 CST
  • 5

No Tauri, estou executando um servidor HTTP para um aplicativo de desktop específico, e exibi seu conteúdo durante o desenvolvimento carregando o arquivo HTML correspondente do local apropriado. Este arquivo HTML será colocado na pasta dist pelo Vite durante o processo de construção.

A questão é: como posso referenciar esse arquivo no aplicativo de lançamento?

Tentei algo direto como: ./../dist/index.client.html, mas não funcionou. Depois de várias tentativas, comecei a pesquisar online, mas só encontrei soluções relacionadas a "recursos". Eu realmente não usei essa parte do Tauri antes.

Como posso acessar o distDiraplicativo de lançamento do Rust?

let is_release = env::var("APP_ENV").unwrap_or_else(|_| "development".to_string()) == "production";

if is_release {
    let html_path = "../dist/index.client.html"; // here
    match fs::read_to_string(html_path) {
        Ok(html_content) => {
            // Success
            Ok::<_, warp::Rejection>(warp::reply::html(html_content))
        }
        Err(_) => {
            let html_content = format!(r#"
                <html>
                    <head><title>Error</title></head>
                    <body>
                        <h1>Index file not found...</h1>
                        <p>{}</p>
                    </body>
                </html>
            "#, html_path).to_string();
            Ok::<_, warp::Rejection>(warp::reply::html(html_content))
        }
    }
}
rust
Martin Hope
rozsazoltan
Asked: 2024-09-02 00:28:12 +0800 CST
  • 5

Resumo

text-primary-500/50não está funcionando como esperado.

Declarar cor dinâmica

Eu tenho uma cor chamada primary. Essa cor não tem nenhuma configuração específica; em vez disso, eu atribuo cores existentes com base em um modelo. Se o elemento pai tiver a classe theme-red, a primarycor deve essencialmente corresponder à redcor. Se o elemento pai tiver a classe theme-blue, a primarycor deve corresponder à bluecor. Por padrão, a cor primária é vermelho.

Implementei isso no exemplo a seguir.

Exemplo

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'var(--color-primary-500)',
        },
      },
    },
  },
}
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<style type="text/tailwindcss">
  @layer utilities {
    .theme-red {
      --color-primary-500: theme('colors.red.500');
    }

    .theme-blue {
      --color-primary-500: theme('colors.blue.500');
    }
  }
</style>

<div>
  <div class="text-green-500">
    Default Green Color
  </div>
  <div class="text-green-500/50">
    Default Green Color With Opacity
  </div>
</div>

<!-- Not working examples with dynamic primary color -->
<div class="theme-red">
  <div class="text-primary-500">
    Example Red Theme
  </div>
  <div class="text-primary-500/50">
    Example Red Theme With Opacity
  </div>
</div>

<div class="theme-blue">
  <div class="text-primary-500">
    Example Blue Theme
  </div>
  <div class="text-primary-500/50">
    Example Blue Theme With Opacity
  </div>
</div>

Resultado

opacidade cor primária não funciona

Cores dinâmicas de opacidade não funcionam

O problema surge com cores transparentes, como text-primary-500/50. Ou seja, deveria estar text-primary-500com opacidade 0,5. Não funciona porque text-primary-500é essencialmente uma cor hexadecimal, mas em CSS, esperávamos um código de cor RGB, que poderíamos então misturar com opacidade em uma escala de 0-1. Como posso fazer funcionar de forma text-primary-500/50semelhante à minha lógica escrita?

Comportamento esperado

Eu esperava que a cor primária funcionasse da mesma forma que as cores base, como mostrado com a cor verde no resultado anterior. Aqui está um exemplo do que eu gostaria.

resultado esperado

css