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

45
cool-unix/pages/demo/layout/collapse.uvue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-button @click="toggle">{{ visible ? t("点击收起") : t("点击展开") }}</cl-button>
<cl-collapse v-model="visible">
<cl-text
>云想衣裳花想容，春风拂槛露华浓，若非群玉山头见，会向瑶台月下逢。</cl-text
>
</cl-collapse>
</demo-item>
<demo-item :label="t('ref 方式调用')">
<cl-button @click="refToggle">{{ t("点击展开") }}</cl-button>
<cl-collapse ref="collapseRef">
<view class="bg-surface-100 p-3 rounded-xl dark:!bg-surface-700">
<cl-text
>云想衣裳花想容，春风拂槛露华浓，若非群玉山头见，会向瑶台月下逢。</cl-text
>
</view>
</cl-collapse>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { ref } from "vue";
const visible = ref(false);
function toggle() {
visible.value = !visible.value;
}
const collapseRef = ref<ClCollapseComponentPublicInstance | null>(null);
function refToggle() {
collapseRef.value!.toggle();
}
</script>

183
cool-unix/pages/demo/layout/flex.uvue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<cl-page>
<view
class="p-3"
:class="{
'is-dark': isDark
}"
>
<demo-item :label="t('基础用法')">
<cl-row :gutter="12">
<cl-col :span="8">
<view class="item">
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="8">
<view class="item">
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="8">
<view class="item">
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
</cl-row>
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
<cl-col :span="12">
<view class="item">
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="12">
<view class="item">
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
</cl-row>
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">4</cl-text>
</view>
</cl-col>
</cl-row>
</demo-item>
<demo-item :label="t('左间隔')">
<cl-row :gutter="12">
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6" :offset="6">
<view class="item active">
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
</cl-row>
</demo-item>
<demo-item :label="t('右移动')">
<cl-row :gutter="12">
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6" :push="6">
<view class="item active">
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
</cl-row>
</demo-item>
<demo-item :label="t('左移动')">
<cl-row :gutter="12">
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
<cl-col :span="6" :pull="6">
<view class="item active">
<cl-text :pt="{ className: 'text' }">4</cl-text>
</view>
</cl-col>
</cl-row>
</demo-item>
<demo-item :label="t('多个数据')">
<cl-row :gutter="12">
<cl-col :span="4" v-for="item in 20" :key="item">
<view class="item mb-2">
<cl-text :pt="{ className: 'text' }">{{ item }}</cl-text>
</view>
</cl-col>
</cl-row>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { isDark } from "@/cool";
</script>
<style lang="scss" scoped>
.item {
@apply h-8 bg-surface-100 rounded-md flex flex-row items-center justify-center;
.text {
@apply text-sm text-surface-700;
}
&.active {
@apply bg-primary-500;
.text {
@apply text-white;
}
}
}
.is-dark {
.item {
@apply bg-surface-700;
.text {
@apply text-surface-100;
}
&.active {
@apply bg-primary-500;
.text {
@apply text-white;
}
}
}
}
</style>

50
cool-unix/pages/demo/layout/float-view.uvue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<cl-page>
<view class="p-3">
<demo-item>
<view class="flex flex-row items-center">
<cl-icon name="notification-4-fill" class="mr-2"></cl-icon>
<cl-text>{{ t("禁用状态，无法拖拽") }}</cl-text>
</view>
</demo-item>
<demo-item>
<view class="flex flex-row items-center">
<cl-icon name="heart-fill" class="mr-2"></cl-icon>
<cl-text>{{ t("不吸附边缘，任意位置可拖拽") }}</cl-text>
</view>
</demo-item>
<cl-float-view :left="200" :bottom="50" :no-snapping="true">
<view
class="w-[40px] h-[40px] bg-primary-500 flex flex-row items-center justify-center"
@tap="toAlert"
>
<cl-icon name="heart-fill" color="white"></cl-icon>
</view>
</cl-float-view>
<cl-float-view disabled :left="20" :bottom="400" :gap="10">
<view
class="w-[40px] h-[40px] bg-surface-400 rounded-full flex flex-row items-center justify-center"
>
<cl-icon name="notification-4-fill" color="white"></cl-icon>
</view>
</cl-float-view>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import { useUi } from "@/uni_modules/cool-ui";
import DemoItem from "../components/item.uvue";
const ui = useUi();
function toAlert() {
ui.showToast({
message: t("这是一个提示")
});
}
</script>

63
cool-unix/pages/demo/layout/footer.uvue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<cl-page>
<view class="p-3">
<demo-item>
<cl-text>解决底部按钮隐藏时页面底部仍有空白间距</cl-text>
<cl-text>解决固定定位时内容占位缺失</cl-text>
</demo-item>
<cl-list>
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
</cl-list>
</view>
<cl-footer :vt="cache.key">
<template v-if="status == 0">
<view class="flex flex-row">
<cl-button :pt="{ className: 'flex-1' }" text border size="large" @tap="cancel">
{{ t("取消订单") }}
</cl-button>
<cl-button :pt="{ className: 'flex-1' }" type="primary" size="large" @tap="buy">
{{ t("立即购买") }}
</cl-button>
</view>
</template>
<cl-button type="error" size="large" @tap="confirm" v-if="status == 1">
{{ t("确认收货") }}
</cl-button>
<cl-button type="success" size="large" @tap="comment" v-if="status == 2">
{{ t("评价") }}
</cl-button>
</cl-footer>
</cl-page>
</template>
<script lang="ts" setup>
import { useCache } from "@/cool";
import { t } from "@/locale";
import { ref } from "vue";
import DemoItem from "../components/item.uvue";
const status = ref(0);
const { cache } = useCache(() => [status.value]);
function cancel() {
status.value = 3;
}
function buy() {
status.value = 1;
}
function confirm() {
status.value = 2;
}
function comment() {
status.value = 3;
}
</script>

44
cool-unix/pages/demo/layout/sticky.uvue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<cl-page back-top>
<cl-sticky>
<view class="bg-primary-500 p-3 h-[40px] flex flex-row items-center">
<cl-text color="white">Header - 1</cl-text>
</view>
</cl-sticky>
<view class="p-3">
<cl-list>
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
</cl-list>
</view>
<cl-sticky :offset-top="40">
<view class="bg-red-500 p-3 h-[40px] flex flex-row items-center">
<cl-text color="white">Header - 2</cl-text>
</view>
</cl-sticky>
<view class="p-3">
<cl-list>
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
</cl-list>
</view>
<cl-sticky :offset-top="80">
<view class="bg-purple-500 p-3 h-[40px] flex flex-row items-center">
<cl-text color="white">Header - 3</cl-text>
</view>
</cl-sticky>
<view class="p-3">
<cl-list>
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
</cl-list>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
</script>

170
cool-unix/pages/demo/layout/tabs.uvue Normal file
View File

@@ -0,0 +1,170 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-tabs v-model="form.val1" :list="list"></cl-tabs>
</demo-item>
<demo-item :label="t('显示滑块')">
<cl-tabs
v-model="form.val2"
:list="list"
show-slider
:pt="{ className: isPad ? '!p-2' : '' }"
></cl-tabs>
<cl-list border :pt="{ className: 'mt-3' }">
<cl-list-item :label="t('添加间距')">
<cl-switch v-model="isPad"></cl-switch>
</cl-list-item>
</cl-list>
</demo-item>
<demo-item :label="t('横向填充')">
<demo-tips>{{ t("适用于标签数量不多的情况") }}</demo-tips>
<cl-tabs v-model="form.val3" :list="list2" fill></cl-tabs>
</demo-item>
<demo-item :label="t('居中')">
<view class="flex flex-row justify-center">
<cl-tabs v-model="form.val4" :list="list2"></cl-tabs>
</view>
</demo-item>
<demo-item :label="t('单个禁用')">
<cl-tabs v-model="form.val5" :list="list3"></cl-tabs>
</demo-item>
<demo-item :label="t('自定义')">
<cl-tabs
v-model="form.val6"
:list="list"
:show-line="isShowLine"
:disabled="isDisabled"
:color="isColor ? 'red' : ''"
:un-color="isColor ? '#ccc' : ''"
></cl-tabs>
<cl-list border :pt="{ className: 'mt-3' }">
<cl-list-item :label="t('显示下划线')">
<cl-switch v-model="isShowLine"></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 { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import DemoTips from "../components/tips.uvue";
import { reactive, ref } from "vue";
import type { ClTabsItem } from "@/uni_modules/cool-ui";
type Form = {
val1: string;
val2: string;
val3: string;
val4: string;
val5: string;
val6: string;
};
const form = reactive<Form>({
val1: "1",
val2: "2",
val3: "1",
val4: "1",
val5: "2",
val6: "1"
});
const list = ref<ClTabsItem[]>([
{
label: "Vue",
value: "1"
},
{
label: "React",
value: "2"
},
{
label: "Angular",
value: "3"
},
{
label: "Svelte",
value: "4"
},
{
label: "Jquery",
value: "5"
},
{
label: "Vuex",
value: "6"
},
{
label: "Vue Router",
value: "7"
},
{
label: "Pinia",
value: "8"
}
]);
const list2 = ref<ClTabsItem[]>([
{
label: "Vue",
value: "1"
},
{
label: "React",
value: "2"
},
{
label: "Angular",
value: "3"
},
{
label: "Svelte",
value: "4"
}
]);
const list3 = ref<ClTabsItem[]>([
{
label: "Vue",
value: "1"
},
{
label: "React",
value: "2"
},
{
label: "Angular",
value: "3",
disabled: true
},
{
label: "Svelte",
value: "4"
}
]);
const isShowLine = ref(true);
const isDisabled = ref(false);
const isColor = ref(false);
const isPad = ref(false);
</script>

97
cool-unix/pages/demo/layout/topbar.uvue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<cl-page>
<view class="p-3">
<demo-item :label="t('基础用法')">
<cl-topbar :title="t('标题')"> </cl-topbar>
</demo-item>
<demo-item :label="t('插槽')">
<cl-topbar :title="t('标题')">
<template #prepend>
<cl-icon
name="heart-fill"
:size="38"
:pt="{
className: 'ml-2'
}"
></cl-icon>
</template>
<template #append>
<cl-icon name="search-line" :size="38"></cl-icon>
</template>
</cl-topbar>
</demo-item>
<demo-item :label="t('自定义颜色')">
<cl-topbar :title="t('标题')" color="white" background-color="#409EFF"> </cl-topbar>
</demo-item>
<demo-item :label="t('使用 PT 自定义颜色')">
<cl-topbar
:title="t('标题')"
:pt="{
className: 'bg-surface-800',
title: {
className: 'text-white'
},
back: {
className: 'text-white'
}
}"
>
</cl-topbar>
</demo-item>
<demo-item :label="t('自定义返回图标')">
<cl-topbar
:title="t('标题')"
back-icon="home-2-line"
:pt="{
back: {
size: 38
}
}"
>
</cl-topbar>
</demo-item>
<demo-item :label="t('禁用返回按钮')">
<cl-topbar :title="t('标题')" :backable="false"> </cl-topbar>
</demo-item>
<demo-item :label="t('自定义返回路径')">
<cl-topbar :title="t('标题')" back-path="/pages/user/login">
<template #prepend>
<cl-text>{{ t("登录") }}</cl-text>
</template>
</cl-topbar>
</demo-item>
<demo-item :label="t('自定义标题内容')">
<cl-topbar>
<cl-tabs v-model="type" :height="66" :list="typeList"></cl-tabs>
</cl-topbar>
</demo-item>
</view>
</cl-page>
</template>
<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { ref } from "vue";
import type { ClTabsItem } from "@/uni_modules/cool-ui";
const type = ref("fans");
const typeList = ref<ClTabsItem[]>([
{
label: "我的粉丝",
value: "fans"
},
{
label: "我的关注",
value: "follow"
}
]);
</script>