refactor: 确立独立子工程架构 (backend, admin, mpuniapp) 并同步更新 AGENTS.md 规范
这个提交包含在：
wikiboss
@@ -0,0 +1,29 @@
|
||||
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
|
||||
const isMP = platformInfo.startsWith('mp')
|
||||
const isAppWebView = process.env.UNI_AUTOMATOR_APP_WEBVIEW == 'true'
|
||||
|
||||
describe('css-function', () => {
|
||||
if (isMP) {
|
||||
it('skip', () => {
|
||||
expect(1).toBe(1)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (isAppWebView) {
|
||||
// app 与 web 存在差异, webview 不进行截图
|
||||
it('not support', () => {
|
||||
expect(1).toBe(1)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
it('screenshot', async () => {
|
||||
const page = await program.reLaunch('/pages/CSS/function/function');
|
||||
await page.waitFor('view');
|
||||
const image = await program.screenshot({
|
||||
fullPage: true
|
||||
})
|
||||
expect(image).toSaveImageSnapshot()
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<view class="padding-safe-area-inset">
|
||||
<view class="text-background">我在状态栏下边</view>
|
||||
<view class="content">
|
||||
<text>此页面使用env()函数适配安全区域，仅在app平台生效。</text>
|
||||
<text>safe-area-inset-top: {{safeareaInsetTop}}px</text>
|
||||
<text>safe-area-inset-left: {{safeareaInsetLeft}}px</text>
|
||||
<text>safe-area-inset-right: {{safeareaInsetRight}}px</text>
|
||||
<text>safe-area-inset-bottom: {{safeareaInsetBottom}}px</text>
|
||||
</view>
|
||||
<view class="text-background">我在导航栏上边</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
|
||||
const safeareaInsetTop = ref(0)
|
||||
const safeareaInsetLeft = ref(0)
|
||||
const safeareaInsetRight = ref(0)
|
||||
const safeareaInsetBottom = ref(0)
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
|
||||
onReady(() => {
|
||||
const page = instance?.proxy?.$page
|
||||
safeareaInsetTop.value = page?.safeAreaInsets.top ?? 0
|
||||
safeareaInsetLeft.value = page?.safeAreaInsets.left ?? 0
|
||||
safeareaInsetRight.value = page?.safeAreaInsets.right ?? 0
|
||||
safeareaInsetBottom.value = page?.safeAreaInsets.bottom ?? 0
|
||||
})
|
||||
|
||||
onResize((options) => {
|
||||
const page = instance?.proxy?.$page
|
||||
safeareaInsetTop.value = page?.safeAreaInsets.top ?? 0
|
||||
safeareaInsetLeft.value = page?.safeAreaInsets.left ?? 0
|
||||
safeareaInsetRight.value = page?.safeAreaInsets.right ?? 0
|
||||
safeareaInsetBottom.value = page?.safeAreaInsets.bottom ?? 0
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.text-background {
|
||||
background-color: red;
|
||||
}
|
||||
.padding-safe-area-inset {
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
/* #ifdef APP */
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
padding-left: env(safe-area-inset-left, 0px);
|
||||
padding-right: env(safe-area-inset-right, 0px);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
/* #endif */
|
||||
}
|
||||
.content{
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="intro-text">RGB 是一种颜色表示方法，通过调整红(Red)、绿(Green)、蓝(Blue)三个通道的值（0-255）来产生不同的颜色。</text>
|
||||
|
||||
<view class="section">
|
||||
<text class="section-title">数值表示 (0-255)</text>
|
||||
<view class="color-grid">
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgb(255, 0, 0);"></view>
|
||||
<text class="color-name">红色</text>
|
||||
<text class="color-value">rgb(255, 0, 0)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgb(0, 255, 0);"></view>
|
||||
<text class="color-name">绿色</text>
|
||||
<text class="color-value">rgb(0, 255, 0)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgb(0, 0, 255);"></view>
|
||||
<text class="color-name">蓝色</text>
|
||||
<text class="color-value">rgb(0, 0, 255)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="color-grid">
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgb(255, 255, 0);"></view>
|
||||
<text class="color-name">黄色</text>
|
||||
<text class="color-value">rgb(255, 255, 0)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgb(255, 0, 255);"></view>
|
||||
<text class="color-name">品红</text>
|
||||
<text class="color-value">rgb(255, 0, 255)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgb(0, 255, 255);"></view>
|
||||
<text class="color-name">青色</text>
|
||||
<text class="color-value">rgb(0, 255, 255)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.color-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.color-item {
|
||||
width: 30%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.color-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="intro-text">RGBA 在 RGB 的基础上增加了透明度(Alpha)通道，取值范围为 0-1，0 表示完全透明，1 表示完全不透明。</text>
|
||||
|
||||
<view class="section">
|
||||
<text class="section-title">数值表示 (RGB: 0-255, A: 0-1)</text>
|
||||
<view class="color-grid">
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgba(255, 0, 0, 0.1);"></view>
|
||||
<text class="color-name">红色 10% 透明</text>
|
||||
<text class="color-value">rgba(255, 0, 0, 0.1)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgba(255, 0, 0, 0.5);"></view>
|
||||
<text class="color-name">红色 50% 透明</text>
|
||||
<text class="color-value">rgba(255, 0, 0, 0.5)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgba(255, 0, 0, 1);"></view>
|
||||
<text class="color-name">红色 不透明</text>
|
||||
<text class="color-value">rgba(255, 0, 0, 1)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="color-grid">
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgba(0, 0, 255, 0.1);"></view>
|
||||
<text class="color-name">蓝色 10% 透明</text>
|
||||
<text class="color-value">rgba(0, 0, 255, 0.1)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgba(0, 0, 255, 0.5);"></view>
|
||||
<text class="color-name">蓝色 50% 透明</text>
|
||||
<text class="color-value">rgba(0, 0, 255, 0.5)</text>
|
||||
</view>
|
||||
<view class="color-item">
|
||||
<view class="color-box" style="background-color: rgba(0, 0, 255, 1);"></view>
|
||||
<text class="color-name">蓝色 不透明</text>
|
||||
<text class="color-value">rgba(0, 0, 255, 1)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.color-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.color-item {
|
||||
width: 30%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.color-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
102
mpuniapp/pages/CSS/function/url.uvue
普通文件
102
mpuniapp/pages/CSS/function/url.uvue
普通文件
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="intro-text">url() 函数用于加载图片、字体等资源，支持 /static 目录下的本地文件和网络链接。</text>
|
||||
<view class="section">
|
||||
<text class="section-title">字体示例</text>
|
||||
<view class="font-grid">
|
||||
<!-- #ifdef APP-IOS -->
|
||||
<view class="font-item">
|
||||
<text class="custom-font">阿里妈妈刀隶体</text>
|
||||
<text class="font-value">@font-face { font-family: 'AlimamaDaoLiTi'; src: url('/static/app-ios/AlimamaDaoLiTi.woff2') }</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="font-item">
|
||||
<text class="pacifico-font">Pacifico Font Example</text>
|
||||
<text class="font-value">@font-face { font-family: 'Pacifico'; src: url('/static/font/Pacifico-Regular.ttf') }</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="font-item">
|
||||
<text class="web-font">网络字体</text>
|
||||
<text class="font-value">@font-face { font-family: 'AlimamaDaoLiTiTTF'; src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf') }</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'AlimamaDaoLiTi';
|
||||
src: url('/static/app-ios/AlimamaDaoLiTi.woff2'),
|
||||
url('/static/app-ios/AlimamaDaoLiTi.woff'),
|
||||
url('/static/font/AlimamaDaoLiTi.otf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Pacifico';
|
||||
src: url('/static/font/Pacifico-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'AlimamaDaoLiTiTTF';
|
||||
src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
padding: 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.font-grid {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.font-item {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.custom-font {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'AlimamaDaoLiTi';
|
||||
}
|
||||
|
||||
.pacifico-font {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Pacifico';
|
||||
}
|
||||
|
||||
.web-font {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'AlimamaDaoLiTiTTF';
|
||||
}
|
||||
|
||||
.font-value {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户