jindengchen/jindengchen-ai-report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序初始提交

Browse Source
This commit is contained in:
jdc
2025-11-13 10:36:23 +08:00
parent f26b4f9a2f
commit 5db3b180eb
447 changed files with 83351 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
cool-unix/pages/demo/basic/button.uvue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-button>{{ t("普通") }}</cl-button>
</demo-item>
<demo-item :label="t('不同类型')">
<view class="flex flex-row flex-wrap mb-2 overflow-visible">
<cl-button type="primary">{{ t("主要") }}</cl-button>
<cl-button type="success">{{ t("成功") }}</cl-button>
<cl-button type="warn">{{ t("警告") }}</cl-button>
</view>
<view class="flex flex-row mb-2 overflow-visible">
<cl-button type="error">{{ t("危险") }}</cl-button>
<cl-button type="info">{{ t("信息") }}</cl-button>
</view>
<view class="flex flex-row overflow-visible">
<cl-button type="light">{{ t("浅色") }}</cl-button>
<cl-button type="dark">{{ t("深色") }}</cl-button>
</view>
</demo-item>
<demo-item :label="t('只显示图标')">
<view class="flex flex-row">
<cl-button type="primary" icon="send-plane-fill"></cl-button>
<cl-button type="error" icon="verified-badge-fill"></cl-button>
<cl-button type="info" icon="edit-fill"></cl-button>
</view>
</demo-item>
<demo-item :label="t('自定义')">
<view class="flex flex-row justify-center mb-5 h-14 items-center">
<cl-button
:type="type"
:size="size"
:text="isText"
:border="isBorder"
:rounded="isRounded"
:loading="isLoading"
:disabled="isDisabled"
:icon="isIcon ? 'send-plane-fill' : ''"
:color="isColor ? '#4286e0' : ''"
:pt="{
className: parseClass([
{
'!bg-transparent': isColor
}
])
}"
>{{ t("自定义") }}</cl-button
>
</view>
<cl-list border>
<view class="p-2">
<cl-tabs
v-model="size"
:height="66"
:list="sizeOptions"
show-slider
fill
></cl-tabs>
</view>
<cl-list-item :label="t('文本模式')">
<cl-switch v-model="isText"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('带边框')">
<cl-switch v-model="isBorder"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('圆角按钮')">
<cl-switch v-model="isRounded"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('带左侧图标')">
<cl-switch v-model="isIcon"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('加载中')">
<cl-switch v-model="isLoading"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('禁用')">
<cl-switch v-model="isDisabled"></cl-switch>
</cl-list-item>
<cl-list-item :label="t('自定义颜色')">
<cl-switch v-model="isColor"></cl-switch>
</cl-list-item>
</cl-list>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import DemoItem from "../components/item.uvue";
import type { ClButtonType, ClTabsItem, Size } from "@/uni_modules/cool-ui";
import { parseClass } from "@/cool";
import { t } from "@/locale";
const type = ref<ClButtonType>("primary");
const isText = ref(false);
const isBorder = ref(false);
const isRounded = ref(false);
const isLoading = ref(false);
const isIcon = ref(false);
const isDisabled = ref(false);
const isColor = ref(false);
const size = ref<Size>("normal");
const sizeOptions = ref<ClTabsItem[]>([
{
label: t("小"),
value: "small"
},
{
label: t("默认"),
value: "normal"
},
{
label: t("大"),
value: "large"
}
]);
</script>

94
cool-unix/pages/demo/basic/icon.uvue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('设置颜色')">
<view class="flex flex-row">
<cl-icon name="heart-fill" color="primary" class="mr-2"></cl-icon>
<cl-icon name="heart-fill" color="success" class="mr-2"></cl-icon>
<cl-icon name="heart-fill" color="error" class="mr-2"></cl-icon>
<cl-icon name="heart-fill" color="warn" class="mr-2"></cl-icon>
<cl-icon name="heart-fill" color="info" class="mr-2"></cl-icon>
<cl-icon name="heart-fill" color="#428bca" class="mr-2"></cl-icon>
<cl-icon name="heart-fill" color="purple"></cl-icon>
</view>
</demo-item>
<demo-item :label="t('设置大小')">
<view class="flex flex-row">
<cl-icon name="heart-fill" class="mr-2" :size="50"></cl-icon>
<cl-icon name="heart-fill" class="mr-2" :size="40"></cl-icon>
<cl-icon name="heart-fill" class="mr-2" :size="30"></cl-icon>
<cl-icon name="heart-fill" class="mr-2" :size="20"></cl-icon>
</view>
</demo-item>
<demo-item>
<cl-text>{{ t("集成 iconfont 与 remixicon 图标库，展示部分示例") }}</cl-text>
</demo-item>
<demo-item :label="t('iconfont')">
<cl-row :gutter="10">
<cl-col :span="4" v-for="item in iconfont" :key="item">
<view
class="flex flex-col items-center justify-center h-[100rpx] rounded-lg"
hover-class="opacity-60"
:hover-stay-time="250"
@tap="copy(item)"
>
<cl-icon :name="item"></cl-icon>
</view>
</cl-col>
</cl-row>
</demo-item>
<demo-item :label="t('remixicon')">
<cl-row :gutter="10">
<cl-col :span="4" v-for="item in remixicon" :key="item">
<view
class="flex flex-col items-center justify-center h-[100rpx]"
hover-class="opacity-60"
:hover-stay-time="250"
@tap="copy(item)"
>
<cl-icon :name="item"></cl-icon>
</view>
</cl-col>
</cl-row>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import DemoItem from "../components/item.uvue";
import { icons } from "@/icons";
import { forInObject, keys } from "@/cool";
import { useUi } from "@/uni_modules/cool-ui";
import { t } from "@/locale";
const ui = useUi();
const remixicon = ref<string[]>([]);
const iconfont = ref<string[]>([]);
forInObject(icons, (value, key) => {
if (key == "iconfont") {
iconfont.value = keys(value).slice(0, 100);
} else {
remixicon.value = keys(value).slice(0, 100);
}
});
function copy(data: string) {
uni.setClipboardData({
data,
showToast: false,
success() {
ui.showToast({
message: t("复制成功")
});
}
});
}
</script>

116
cool-unix/pages/demo/basic/image.uvue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-image :src="url"></cl-image>
</demo-item>
<demo-item :label="t('不同裁剪')">
<view class="flex flex-row justify-between">
<view class="flex flex-col items-center justify-center">
<cl-image :src="url" mode="aspectFill"></cl-image>
<cl-text
:pt="{
className: 'text-sm mt-1'
}"
>aspectFill</cl-text
>
</view>
<view class="flex flex-col items-center justify-center">
<cl-image :src="url" mode="aspectFit"></cl-image>
<cl-text
:pt="{
className: 'text-sm mt-1'
}"
>aspectFit</cl-text
>
</view>
<view class="flex flex-col items-center justify-center">
<cl-image :src="url" mode="heightFix"></cl-image>
<cl-text
:pt="{
className: 'text-sm mt-1'
}"
>heightFix</cl-text
>
</view>
<view class="flex flex-col items-center justify-center">
<cl-image :src="url" mode="scaleToFill"></cl-image>
<cl-text
:pt="{
className: 'text-sm mt-1'
}"
>scaleToFill</cl-text
>
</view>
</view>
</demo-item>
<demo-item :label="t('点击可预览')">
<cl-image :src="url" preview></cl-image>
</demo-item>
<demo-item :label="t('失败时显示')">
<cl-image src="url"></cl-image>
</demo-item>
<demo-item :label="t('加载中')">
<cl-image src=""></cl-image>
</demo-item>
<demo-item :label="t('自定义圆角')">
<view class="flex flex-row">
<cl-image
:src="url"
:pt="{
inner: {
className: '!rounded-none'
}
}"
></cl-image>
<cl-image
:src="url"
:pt="{
className: 'ml-3',
inner: {
className: '!rounded-2xl'
}
}"
></cl-image>
<cl-image
:src="url"
:pt="{
className: 'ml-3',
inner: {
className: '!rounded-3xl'
}
}"
></cl-image>
<cl-image
:src="url"
:pt="{
className: 'ml-3',
inner: {
className: '!rounded-full'
}
}"
></cl-image>
</view>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import DemoItem from "../components/item.uvue";
import { t } from "@/locale";
const url = ref("https://unix.cool-js.com/images/demo/avatar.jpg");
</script>

72
cool-unix/pages/demo/basic/tag.uvue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<view class="flex flex-row">
<cl-tag>{{ t("标签") }}</cl-tag>
</view>
</demo-item>
<demo-item :label="t('不同类型')">
<view class="flex flex-row flex-wrap">
<cl-tag type="primary">{{ t("主要") }}</cl-tag>
<cl-tag type="success">{{ t("成功") }}</cl-tag>
<cl-tag type="warn">{{ t("警告") }}</cl-tag>
<cl-tag type="error">{{ t("危险") }}</cl-tag>
<cl-tag type="info">{{ t("信息") }}</cl-tag>
</view>
</demo-item>
<demo-item :label="t('带图标')">
<view class="flex flex-row">
<cl-tag icon="mail-line">{{ t("邮件") }}</cl-tag>
<cl-tag icon="calendar-line">{{ t("日历") }}</cl-tag>
<cl-tag icon="file-line">{{ t("文件") }}</cl-tag>
</view>
</demo-item>
<demo-item :label="t('圆角')">
<view class="flex flex-row">
<cl-tag rounded>{{ t("圆角") }}</cl-tag>
</view>
</demo-item>
<demo-item :label="t('可关闭')">
<view class="flex flex-row">
<cl-tag closable>{{ t("可关闭") }}</cl-tag>
</view>
</demo-item>
<demo-item :label="t('镂空')">
<view class="flex flex-row flex-wrap">
<cl-tag type="primary" plain>{{ t("主要") }}</cl-tag>
<cl-tag type="success" plain>{{ t("成功") }}</cl-tag>
<cl-tag type="warn" plain>{{ t("警告") }}</cl-tag>
<cl-tag type="error" plain>{{ t("危险") }}</cl-tag>
<cl-tag type="info" plain>{{ t("信息") }}</cl-tag>
</view>
</demo-item>
<demo-item :label="t('自定义')">
<view class="flex flex-row">
<cl-tag
:pt="{
className: '!bg-sky-200',
text: {
className: '!text-sky-700'
}
}"
>{{ t("自定义颜色") }}</cl-tag
>
<cl-tag :pt="{ className: '!rounded-none' }">{{ t("自定义无圆角") }}</cl-tag>
</view>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import DemoItem from "../components/item.uvue";
import { t } from "@/locale";
</script>

103
cool-unix/pages/demo/basic/text.uvue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-text>云想衣裳花想容，春风拂槛露华浓。</cl-text>
</demo-item>
<demo-item :label="t('自定义颜色')">
<cl-text color="primary">明月松间照，清泉石上流。</cl-text>
<cl-text color="error">举头望明月，低头思故乡。</cl-text>
<cl-text color="success">春眠不觉晓，处处闻啼鸟。</cl-text>
<cl-text color="warn">劝君更尽一杯酒，西出阳关无故人。</cl-text>
<cl-text color="info">孤帆远影碧空尽，唯见长江天际流。</cl-text>
<cl-text
:pt="{
className: 'text-sky-500'
}"
>大漠孤烟直，长河落日圆。</cl-text
>
</demo-item>
<demo-item :label="t('省略号')">
<cl-text ellipsis
>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。</cl-text
>
</demo-item>
<demo-item :label="t('多行省略号')">
<cl-text ellipsis :lines="2"
>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。天阶夜色凉如水，卧看牵牛织女星。人生若只如初见，何事秋风悲画扇。山有木兮木有枝，心悦君兮君不知。</cl-text
>
</demo-item>
<demo-item :label="t('字体大小')">
<cl-text
:pt="{
className: 'text-xs'
}"
>text-xs</cl-text
>
<cl-text
:pt="{
className: 'text-sm'
}"
>text-sm</cl-text
>
<cl-text
:pt="{
className: 'text-md'
}"
>text-md</cl-text
>
<cl-text
:pt="{
className: 'text-lg'
}"
>text-lg</cl-text
>
<cl-text
:pt="{
className: 'text-xl'
}"
>text-xl</cl-text
>
</demo-item>
<demo-item :label="t('自定义尺寸')">
<cl-text :size="20">20rpx</cl-text>
<cl-text size="30rpx">30rpx</cl-text>
<cl-text size="15px">15px</cl-text>
</demo-item>
<demo-item :label="t('金额')">
<cl-text type="amount" :value="10000000.0"></cl-text>
</demo-item>
<demo-item :label="t('手机号脱敏')">
<cl-text type="phone" mask value="13800138000"></cl-text>
</demo-item>
<demo-item :label="t('姓名脱敏')">
<cl-text type="name" mask value="张三"></cl-text>
</demo-item>
<demo-item :label="t('邮箱脱敏')">
<cl-text type="email" mask value="example@example.com"></cl-text>
</demo-item>
<demo-item :label="t('银行卡脱敏')">
<cl-text type="card" mask value="1234 5678 9012 3456"></cl-text>
</demo-item>
<demo-item :label="t('自定义脱敏字符')">
<cl-text type="phone" value="13800138000" mask mask-char="~"></cl-text>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
</script>