优化
This commit is contained in:
@@ -23,7 +23,7 @@ type Config = {
|
|||||||
|
|
||||||
// 根据环境导出最终配置
|
// 根据环境导出最终配置
|
||||||
export const config = {
|
export const config = {
|
||||||
name: "cool-unix",
|
name: "Cool Unix",
|
||||||
version: "1.0.0",
|
version: "1.0.0",
|
||||||
locale: "zh",
|
locale: "zh",
|
||||||
website: "https://cool-js.com",
|
website: "https://cool-js.com",
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -73,7 +73,8 @@
|
|||||||
{
|
{
|
||||||
"path": "login",
|
"path": "login",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom",
|
||||||
|
"disableScroll": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
className: 'flex-row mx-[-10rpx]'
|
className: 'flex-row mx-[-10rpx]'
|
||||||
},
|
},
|
||||||
item: {
|
item: {
|
||||||
className: 'flex-1 mx-[10rpx]'
|
className: 'flex-1 mx-[10rpx] !rounded-xl'
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
@@ -48,10 +48,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<view class="pb-5 pt-2 px-3">
|
<view class="pb-5 pt-2 px-3 flex flex-row items-center">
|
||||||
<cl-checkbox v-model="agree"
|
<cl-checkbox v-model="agree">请阅读并同意</cl-checkbox>
|
||||||
>请阅读并同意《会员服务协议》和《隐私政策》</cl-checkbox
|
<cl-text color="primary">《会员服务协议》</cl-text>
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -170,7 +169,7 @@ function openActionSheet6() {
|
|||||||
function done() {
|
function done() {
|
||||||
if (!agree.value) {
|
if (!agree.value) {
|
||||||
ui.showToast({
|
ui.showToast({
|
||||||
message: t("请阅读并同意《会员服务协议》和《隐私政策》")
|
message: "请阅读并同意《会员服务协议》"
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<cl-page>
|
<cl-page>
|
||||||
<view class="p-3">
|
<view class="p-3">
|
||||||
<demo-item :label="t('基础用法')">
|
<demo-item :label="t('基础用法')">
|
||||||
<cl-button @tap="open()">打开</cl-button>
|
<cl-button @tap="open()">{{ t("打开") }}</cl-button>
|
||||||
</demo-item>
|
</demo-item>
|
||||||
|
|
||||||
<demo-item :label="t('不同位置')">
|
<demo-item :label="t('不同位置')">
|
||||||
|
|||||||
@@ -18,14 +18,11 @@
|
|||||||
</demo-item>
|
</demo-item>
|
||||||
|
|
||||||
<demo-item :label="t('单个 true / false')">
|
<demo-item :label="t('单个 true / false')">
|
||||||
<view class="flex flex-row justify-between">
|
<view class="flex flex-row items-center">
|
||||||
<cl-checkbox
|
<cl-checkbox v-model="checked4">同意并阅读</cl-checkbox>
|
||||||
v-model="checked4"
|
<cl-text color="primary">《用户协议》</cl-text>
|
||||||
:pt="{
|
|
||||||
className: 'mr-5'
|
<view class="flex-1"></view>
|
||||||
}"
|
|
||||||
>同意并阅读《用户协议》</cl-checkbox
|
|
||||||
>
|
|
||||||
|
|
||||||
<cl-switch v-model="checked4"></cl-switch>
|
<cl-switch v-model="checked4"></cl-switch>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -4,16 +4,16 @@
|
|||||||
|
|
||||||
<view class="p-3">
|
<view class="p-3">
|
||||||
<cl-list>
|
<cl-list>
|
||||||
<cl-list-item label="操作">
|
<cl-list-item :label="t('操作')">
|
||||||
<cl-button type="info" @click="clear">清空</cl-button>
|
<cl-button type="info" @click="clear">{{ t("清空") }}</cl-button>
|
||||||
<cl-button @click="preview">预览</cl-button>
|
<cl-button @click="preview">{{ t("预览") }}</cl-button>
|
||||||
</cl-list-item>
|
</cl-list-item>
|
||||||
|
|
||||||
<cl-list-item label="大屏">
|
<cl-list-item :label="t('设置高度')">
|
||||||
<cl-switch v-model="isFullscreen" @change="onFullscreenChange"></cl-switch>
|
<cl-switch v-model="isFullscreen" @change="onFullscreenChange"></cl-switch>
|
||||||
</cl-list-item>
|
</cl-list-item>
|
||||||
|
|
||||||
<cl-list-item label="毛笔效果">
|
<cl-list-item :label="t('毛笔效果')">
|
||||||
<cl-switch v-model="isBrush"></cl-switch>
|
<cl-switch v-model="isBrush"></cl-switch>
|
||||||
</cl-list-item>
|
</cl-list-item>
|
||||||
</cl-list>
|
</cl-list>
|
||||||
@@ -22,6 +22,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { t } from "@/locale";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const height = ref(0);
|
const height = ref(0);
|
||||||
|
|||||||
@@ -17,19 +17,19 @@
|
|||||||
className: 'mt-5'
|
className: 'mt-5'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<cl-list-item label="改个颜色">
|
<cl-list-item :label="t('改个颜色')">
|
||||||
<cl-switch v-model="isColor"></cl-switch>
|
<cl-switch v-model="isColor"></cl-switch>
|
||||||
</cl-list-item>
|
</cl-list-item>
|
||||||
|
|
||||||
<cl-list-item label="显示文本">
|
<cl-list-item :label="t('显示文本')">
|
||||||
<cl-switch v-model="isText"></cl-switch>
|
<cl-switch v-model="isText"></cl-switch>
|
||||||
</cl-list-item>
|
</cl-list-item>
|
||||||
|
|
||||||
<cl-list-item label="快一些">
|
<cl-list-item :label="t('快一些')">
|
||||||
<cl-switch v-model="isDuration"></cl-switch>
|
<cl-switch v-model="isDuration"></cl-switch>
|
||||||
</cl-list-item>
|
</cl-list-item>
|
||||||
|
|
||||||
<cl-list-item label="显示文本">
|
<cl-list-item :label="t('显示文本')">
|
||||||
<cl-button type="light" size="small" icon="add-line" @tap="add"></cl-button>
|
<cl-button type="light" size="small" icon="add-line" @tap="add"></cl-button>
|
||||||
<cl-button
|
<cl-button
|
||||||
type="light"
|
type="light"
|
||||||
@@ -48,7 +48,6 @@
|
|||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import { t } from "@/locale";
|
import { t } from "@/locale";
|
||||||
import DemoItem from "../components/item.uvue";
|
import DemoItem from "../components/item.uvue";
|
||||||
import { ctx } from "@/cool";
|
|
||||||
|
|
||||||
const isSize = ref(false);
|
const isSize = ref(false);
|
||||||
const isText = ref(true);
|
const isText = ref(true);
|
||||||
|
|||||||
@@ -16,9 +16,9 @@
|
|||||||
></cl-image>
|
></cl-image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<text class="text-2xl text-primary-500 dark:!text-white mr-auto ml-2 flex-1"
|
<text class="text-xl text-primary-500 dark:!text-white mr-auto ml-2 flex-1">
|
||||||
>cool-unix</text
|
{{ config.name }}
|
||||||
>
|
</text>
|
||||||
|
|
||||||
<view
|
<view
|
||||||
class="bg-primary-500 h-8 w-8 rounded-full flex flex-row items-center justify-center"
|
class="bg-primary-500 h-8 w-8 rounded-full flex flex-row items-center justify-center"
|
||||||
@@ -71,6 +71,7 @@ import { t } from "@/locale";
|
|||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import Tabbar from "@/components/tabbar.uvue";
|
import Tabbar from "@/components/tabbar.uvue";
|
||||||
import { useUi } from "@/uni_modules/cool-ui";
|
import { useUi } from "@/uni_modules/cool-ui";
|
||||||
|
import { config } from "@/config";
|
||||||
|
|
||||||
const ui = useUi();
|
const ui = useUi();
|
||||||
const refs = useRefs();
|
const refs = useRefs();
|
||||||
@@ -358,12 +359,12 @@ const data = computed<Item[]>(() => {
|
|||||||
path: "/pages/demo/other/qrcode"
|
path: "/pages/demo/other/qrcode"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "签名",
|
label: t("签名"),
|
||||||
icon: "sketching",
|
icon: "sketching",
|
||||||
path: "/pages/demo/other/sign"
|
path: "/pages/demo/other/sign"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "图片裁剪",
|
label: t("图片裁剪"),
|
||||||
icon: "crop-line",
|
icon: "crop-line",
|
||||||
path: "/pages/demo/other/cropper"
|
path: "/pages/demo/other/cropper"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<view class="mb-3 flex flex-row">
|
<view class="mb-3 flex flex-row">
|
||||||
<cl-input
|
<cl-input
|
||||||
v-model="form.phone"
|
v-model="form.phone"
|
||||||
prefix-icon="smartphone-line"
|
prefix-icon="device-fill"
|
||||||
:placeholder="t('请输入手机号')"
|
:placeholder="t('请输入手机号')"
|
||||||
:border="false"
|
:border="false"
|
||||||
:pt="{
|
:pt="{
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
v-model="form.smsCode"
|
v-model="form.smsCode"
|
||||||
:clearable="false"
|
:clearable="false"
|
||||||
type="number"
|
type="number"
|
||||||
prefix-icon="mail-line"
|
prefix-icon="shield-check-fill"
|
||||||
:placeholder="t('请输入验证码')"
|
:placeholder="t('请输入验证码')"
|
||||||
:maxlength="4"
|
:maxlength="4"
|
||||||
:border="false"
|
:border="false"
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
></cl-image>
|
></cl-image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<cl-text :pt="{ className: '!text-2xl font-bold mt-2' }">{{ config.name }}</cl-text>
|
<cl-text :pt="{ className: '!text-xl font-bold mt-3' }">{{ config.name }}</cl-text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<login-phone :form="form" @success="toLogin"></login-phone>
|
<login-phone :form="form" @success="toLogin"></login-phone>
|
||||||
@@ -22,28 +22,26 @@
|
|||||||
<view class="mt-6 flex flex-row flex-wrap items-center justify-center">
|
<view class="mt-6 flex flex-row flex-wrap items-center justify-center">
|
||||||
<cl-checkbox
|
<cl-checkbox
|
||||||
v-model="agree"
|
v-model="agree"
|
||||||
:pt="{ icon: { size: 32 } }"
|
:pt="{ icon: { size: 28 } }"
|
||||||
active-icon="checkbox-circle-line"
|
active-icon="checkbox-circle-fill"
|
||||||
inactive-icon="checkbox-blank-circle-line"
|
inactive-icon="checkbox-blank-circle-line"
|
||||||
>
|
>
|
||||||
</cl-checkbox>
|
</cl-checkbox>
|
||||||
<cl-text :pt="{ className: '!text-sm' }" color="info">
|
<cl-text color="info" :pt="{ className: '!text-xs' }">{{
|
||||||
{{ t("已阅读并同意") }}
|
t("已阅读并同意")
|
||||||
</cl-text>
|
}}</cl-text>
|
||||||
<cl-text
|
<cl-text
|
||||||
:pt="{ className: '!text-sm mx-1' }"
|
:pt="{ className: '!text-xs' }"
|
||||||
@tap.stop="toDoc(t('用户协议'), 'userAgreement')"
|
@tap.stop="toDoc(t('用户协议'), 'userAgreement')"
|
||||||
>
|
>
|
||||||
{{ t("用户协议") }}
|
《{{ t("用户协议") }}》
|
||||||
</cl-text>
|
|
||||||
<cl-text :pt="{ className: '!text-sm' }" color="info">
|
|
||||||
{{ t("和") }}
|
|
||||||
</cl-text>
|
</cl-text>
|
||||||
|
<cl-text color="info" :pt="{ className: '!text-xs' }">、</cl-text>
|
||||||
<cl-text
|
<cl-text
|
||||||
:pt="{ className: '!text-sm mx-1' }"
|
:pt="{ className: '!text-xs' }"
|
||||||
@tap.stop="toDoc(t('隐私政策'), 'privacyPolicy')"
|
@tap.stop="toDoc(t('隐私政策'), 'privacyPolicy')"
|
||||||
>
|
>
|
||||||
{{ t("隐私政策") }}
|
《{{ t("隐私政策") }}》
|
||||||
</cl-text>
|
</cl-text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -101,7 +99,7 @@ function toDoc(name: string, path: string) {}
|
|||||||
function isAgree() {
|
function isAgree() {
|
||||||
if (!agree.value) {
|
if (!agree.value) {
|
||||||
ui.showToast({
|
ui.showToast({
|
||||||
message: t("请先阅读并同意用户协议和隐私政策")
|
message: t("请先阅读并同意《用户协议》和《隐私政策》")
|
||||||
});
|
});
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|||||||
@@ -2,25 +2,18 @@ import type { PassThroughProps } from "../../types";
|
|||||||
|
|
||||||
export type ClCropperPassThrough = {
|
export type ClCropperPassThrough = {
|
||||||
className?: string;
|
className?: string;
|
||||||
inner?: PassThroughProps;
|
|
||||||
image?: PassThroughProps;
|
image?: PassThroughProps;
|
||||||
|
op?: PassThroughProps;
|
||||||
|
opItem?: PassThroughProps;
|
||||||
|
mask?: PassThroughProps;
|
||||||
cropBox?: PassThroughProps;
|
cropBox?: PassThroughProps;
|
||||||
button?: PassThroughProps;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ClCropperProps = {
|
export type ClCropperProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
pt?: ClCropperPassThrough;
|
pt?: ClCropperPassThrough;
|
||||||
src?: string;
|
cropWidth?: number;
|
||||||
width?: string | number;
|
cropHeight?: number;
|
||||||
height?: string | number;
|
|
||||||
cropWidth?: string | number;
|
|
||||||
cropHeight?: string | number;
|
|
||||||
maxScale?: number;
|
maxScale?: number;
|
||||||
showButtons?: boolean;
|
resizable?: boolean;
|
||||||
quality?: number;
|
|
||||||
format?: "jpg" | "png";
|
|
||||||
disabled?: boolean;
|
|
||||||
canResize?: boolean; // 是否可以自定义裁剪框大小
|
|
||||||
canFlip?: boolean; // 是否显示翻转功能
|
|
||||||
};
|
};
|
||||||
@@ -14,16 +14,23 @@
|
|||||||
<cl-text
|
<cl-text
|
||||||
v-if="showText"
|
v-if="showText"
|
||||||
:pt="{
|
:pt="{
|
||||||
className: parseClass({
|
className: parseClass([
|
||||||
|
{
|
||||||
'!text-surface-400': disabled
|
'!text-surface-400': disabled
|
||||||
})
|
},
|
||||||
|
pt.text?.className
|
||||||
|
])
|
||||||
}"
|
}"
|
||||||
ellipsis
|
ellipsis
|
||||||
>
|
>
|
||||||
{{ text }}
|
{{ text }}
|
||||||
</cl-text>
|
</cl-text>
|
||||||
|
|
||||||
<text class="cl-select-trigger__placeholder" v-else>
|
<text
|
||||||
|
class="cl-select-trigger__placeholder"
|
||||||
|
:class="[pt.placeholder?.className]"
|
||||||
|
v-else
|
||||||
|
>
|
||||||
{{ placeholder }}
|
{{ placeholder }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -53,6 +60,7 @@ import { computed } from "vue";
|
|||||||
import type { ClIconProps } from "../cl-icon/props";
|
import type { ClIconProps } from "../cl-icon/props";
|
||||||
import { isDark, parseClass, parsePt } from "@/cool";
|
import { isDark, parseClass, parsePt } from "@/cool";
|
||||||
import { t } from "@/locale";
|
import { t } from "@/locale";
|
||||||
|
import type { PassThroughProps } from "../../types";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "cl-select-trigger"
|
name: "cl-select-trigger"
|
||||||
@@ -98,6 +106,8 @@ const emit = defineEmits(["clear"]);
|
|||||||
type PassThrough = {
|
type PassThrough = {
|
||||||
className?: string; // 根元素类名
|
className?: string; // 根元素类名
|
||||||
icon?: ClIconProps; // 图标样式
|
icon?: ClIconProps; // 图标样式
|
||||||
|
placeholder?: PassThroughProps; // 占位符样式
|
||||||
|
text?: PassThroughProps; // 文本样式
|
||||||
};
|
};
|
||||||
|
|
||||||
// 解析透传样式配置
|
// 解析透传样式配置
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
import type { ClIconProps } from "../cl-icon/props";
|
import type { ClIconProps } from "../cl-icon/props";
|
||||||
|
import type { PassThroughProps } from "../../types";
|
||||||
|
|
||||||
export type ClSelectTriggerPassThrough = {
|
export type ClSelectTriggerPassThrough = {
|
||||||
className?: string;
|
className?: string;
|
||||||
icon?: ClIconProps;
|
icon?: ClIconProps;
|
||||||
|
placeholder?: PassThroughProps;
|
||||||
|
text?: PassThroughProps;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ClSelectTriggerProps = {
|
export type ClSelectTriggerProps = {
|
||||||
|
|||||||
@@ -14,5 +14,4 @@ export type ClSignProps = {
|
|||||||
minStrokeWidth?: number;
|
minStrokeWidth?: number;
|
||||||
maxStrokeWidth?: number;
|
maxStrokeWidth?: number;
|
||||||
velocitySensitivity?: number;
|
velocitySensitivity?: number;
|
||||||
autoRotate?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|||||||
2
uni_modules/cool-ui/index.d.ts
vendored
2
uni_modules/cool-ui/index.d.ts
vendored
@@ -12,6 +12,7 @@ import type { ClCheckboxProps, ClCheckboxPassThrough } from "./components/cl-che
|
|||||||
import type { ClColProps, ClColPassThrough } from "./components/cl-col/props";
|
import type { ClColProps, ClColPassThrough } from "./components/cl-col/props";
|
||||||
import type { ClCollapseProps, ClCollapsePassThrough } from "./components/cl-collapse/props";
|
import type { ClCollapseProps, ClCollapsePassThrough } from "./components/cl-collapse/props";
|
||||||
import type { ClCountdownProps, ClCountdownPassThrough } from "./components/cl-countdown/props";
|
import type { ClCountdownProps, ClCountdownPassThrough } from "./components/cl-countdown/props";
|
||||||
|
import type { ClCropperProps, ClCropperPassThrough } from "./components/cl-cropper/props";
|
||||||
import type { ClDraggableProps, ClDraggablePassThrough } from "./components/cl-draggable/props";
|
import type { ClDraggableProps, ClDraggablePassThrough } from "./components/cl-draggable/props";
|
||||||
import type { ClFloatViewProps } from "./components/cl-float-view/props";
|
import type { ClFloatViewProps } from "./components/cl-float-view/props";
|
||||||
import type { ClFooterProps, ClFooterPassThrough } from "./components/cl-footer/props";
|
import type { ClFooterProps, ClFooterPassThrough } from "./components/cl-footer/props";
|
||||||
@@ -79,6 +80,7 @@ declare module "vue" {
|
|||||||
"cl-col": (typeof import('./components/cl-col/cl-col.uvue')['default']) & import('vue').DefineComponent<ClColProps>;
|
"cl-col": (typeof import('./components/cl-col/cl-col.uvue')['default']) & import('vue').DefineComponent<ClColProps>;
|
||||||
"cl-collapse": (typeof import('./components/cl-collapse/cl-collapse.uvue')['default']) & import('vue').DefineComponent<ClCollapseProps>;
|
"cl-collapse": (typeof import('./components/cl-collapse/cl-collapse.uvue')['default']) & import('vue').DefineComponent<ClCollapseProps>;
|
||||||
"cl-countdown": (typeof import('./components/cl-countdown/cl-countdown.uvue')['default']) & import('vue').DefineComponent<ClCountdownProps>;
|
"cl-countdown": (typeof import('./components/cl-countdown/cl-countdown.uvue')['default']) & import('vue').DefineComponent<ClCountdownProps>;
|
||||||
|
"cl-cropper": (typeof import('./components/cl-cropper/cl-cropper.uvue')['default']) & import('vue').DefineComponent<ClCropperProps>;
|
||||||
"cl-draggable": (typeof import('./components/cl-draggable/cl-draggable.uvue')['default']) & import('vue').DefineComponent<ClDraggableProps>;
|
"cl-draggable": (typeof import('./components/cl-draggable/cl-draggable.uvue')['default']) & import('vue').DefineComponent<ClDraggableProps>;
|
||||||
"cl-float-view": (typeof import('./components/cl-float-view/cl-float-view.uvue')['default']) & import('vue').DefineComponent<ClFloatViewProps>;
|
"cl-float-view": (typeof import('./components/cl-float-view/cl-float-view.uvue')['default']) & import('vue').DefineComponent<ClFloatViewProps>;
|
||||||
"cl-footer": (typeof import('./components/cl-footer/cl-footer.uvue')['default']) & import('vue').DefineComponent<ClFooterProps>;
|
"cl-footer": (typeof import('./components/cl-footer/cl-footer.uvue')['default']) & import('vue').DefineComponent<ClFooterProps>;
|
||||||
|
|||||||
Reference in New Issue
Block a user