-
@@ -108,8 +107,7 @@ watchDebounced(
diff --git a/web/components/SettingCard.vue b/web/components/SettingCard.vue
index 80bdfa9..9e47b0f 100755
--- a/web/components/SettingCard.vue
+++ b/web/components/SettingCard.vue
@@ -1,116 +1,28 @@
-
-
-
-
{{ index + 1 }}
-
+
+
+
+
+
+
+
{{chart.description}}
-
{{ step.label }}
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
数据槽 {{ index + 1 }}
-
-
-
-
- 添加一个数据槽
+
+
+
+
+
+
+
+ 上一步
+
+
+
+
+
+
+
+ 下一步
-
-
-
-
{{ setting.label }}
-
-
-
-
-
-
-
-
-
{{ CardSettings['name'].value }}
-
-
-
-
-
-
-
-
-
@@ -215,267 +116,59 @@ onMounted(() => {
display: grid;
padding: $padding*2;
grid-template-rows: auto auto 1fr auto;
- gap: $gap*4;
+ gap: $gap*5;
background: $light-bg-color;
border-radius: $radius*2;
-
+ *{
+ @include SC_Font()
+ }
.dark-mode & {
background: $dark-bg-color;
}
}
-
-.card-top {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: $gap*2;
-}
-
-.card-step-item {
- display: flex;
- align-items: center;
- gap: $gap;
-
- div {
- display: flex;
- width: 28px;
- height: 28px;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 10px;
- border-radius: 100px;
- font-size: 14px;
- font-style: normal;
- font-weight: 700;
- color: #8D8D99;
- background: #E1E1E6;
- }
-
- h3 {
- color: #8D8D99;
- font-size: 16px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%; /* 24px */
- }
-}
-
-.card-step-item-active {
-
- div {
- color: #FFFFFF;
- background: $primary-color;
- }
-
- h3 {
- color: $light-text-color;
-
- .dark-mode & {
- color: $dark-text-color;
- }
- }
-}
-
-.card-step-item-activated {
- div {
- background: #1D8841;
-
- svg {
- stroke: #FFF;
- margin-top: 2.5px;
- }
- }
-
- h3 {
- color: $light-text-color;
-
- .dark-mode & {
- color: $dark-text-color;
- }
- }
-}
-
-.card-split {
- width: 95%;
- margin-left: auto;
- margin-right: auto;
- height: 1px;
- background: $unfocused-color;
+.setting-card-header{
}
-
-.card-container {
- min-height: 200px;
- height: 100%;
- max-height: 400px;
- overflow-y: auto;
-
- &::-webkit-scrollbar {
- width: 0;
- }
+.setting-card-content {
+ min-height: 400px;
+ max-height: 800px;
}
-
-.card-action {
- height: 56px;
- gap: $gap*4;
- display: flex;
- justify-content: space-between;
-
- button {
- display: flex;
- width: 158px;
- padding: 16px 32px;
- justify-content: center;
- align-items: center;
- gap: 8px;
- font-size: 16px;
- font-style: normal;
- font-weight: 700;
- line-height: 150%; /* 24px */
- text-transform: uppercase;
- border: unset;
- outline: unset;
- background: unset;
- cursor: pointer;
- border-radius: 6px;
- }
-
- button:first-of-type {
-
- color: $primary-color;
-
- border: 2px solid $primary-color;
- }
-
- button:last-of-type {
- background: $primary-color;
- color: #FFF;
- }
-}
-
-.step1-box {
+.step1-box{
display: grid;
- width: 100%;
- height: 100%;
- grid-template-columns: 1fr 1fr 1fr;
gap: $gap*2;
- grid-template-rows: repeat(auto-fit, auto);
-
- .chart-box {
- min-width: 120px;
+ grid-template-columns: repeat(3,1fr);
+ place-content: center;
+ place-items: center;
+ .chart-box{
display: flex;
flex-direction: column;
gap: $gap;
- border: 1px solid #E1E1E6;
- height: min-content;
- border-radius: $radius*2;
- padding: $padding;
- background: #f4f4f4;
-
- .dark-mode & {
- background: $dark-bg-underline-color;
- border-color: $unfocused-color;
- }
- }
-
- .chart-box-active {
- border: 2px solid $primary-color;
- }
-}
-
-.step2-box {
- display: flex;
- flex-direction: column;
- gap: $gap*2;
- padding: 0 0 $padding*4 0;
-
- > button {
- background: $primary-color;
+ font-size: 12px;
+ font-weight: 900;
+ justify-content: center;
+ align-items: center;
cursor: pointer;
+ background: rgba(238, 238, 238, 0.1);
+ border: $border;
+ height: 140px;
+ border-radius: $radius*2;
+ width: 140px;
}
- .Select-box {
- display: flex;
- align-items: center;
- gap: $gap;
-
- .p-dropdown {
- flex: 1;
- }
+ .chart-box-active{
+ border-color: $primary-color;
+ background: rgba(238, 238, 238, 1);
}
}
-
-.step3-box {
- display: flex;
- flex-direction: column;
+.setting-card-folder{
+ display: flex;
gap: $gap*2;
-
-
- .setting-box {
- display: flex;
- gap: $gap;
- align-items: center;
-
- .p-inputtext {
- flex: 1;
- }
+ button{
+ flex: 1;
}
+
}
-
-:deep(.p-inputtext) {
- color: $light-text-color;
-}
-
-
-.step4-box {
- background: $light-bg-underline-color;
- padding: $padding;
- height: 100%;
- border-radius: $radius*2;
-
- .dark-mode & {
- background: $dark-bg-underline-color;
- }
-}
-
-.card-layout {
- width: 100%;
- height: 100%;
- min-height: 250px;
- background: $light-bg-color;
- border-radius: $radius*2;
- box-shadow: 0 10px 30px 0 rgba(17, 38, 146, 0.05);
- padding: $padding*1.5;
- position: relative;
- display: flex;
- flex-direction: column;
- gap: $gap*2;
-
- &:hover {
- cursor: move;
- }
-
- .dark-mode & {
- background: $dark-bg-color;
- }
-}
-
-.card-title {
- display: flex;
- align-items: center;
- gap: $gap;
- color: $light-text-color;
-
- .dark-mode & {
- color: $dark-text-color;
- }
-
- div {
- width: 6px;
- height: 20px;
- border-radius: $radius;
- background: $primary-color;
- }
+:deep(.n-cascader-menu .n-cascader-submenu.n-cascader-submenu--virtual){
+ width: auto;
}
\ No newline at end of file
diff --git a/web/components/shell/FloaterBar.vue b/web/components/shell/FloaterBar.vue
index 641ca9d..ea15dd1 100755
--- a/web/components/shell/FloaterBar.vue
+++ b/web/components/shell/FloaterBar.vue
@@ -1,11 +1,12 @@
-
{{$colorMode.value=='dark'?'深色':'浅色'}}
+
{{$colorMode.value=='dark'?'深色':'浅色'}}
隐私策略
关于我们
diff --git a/web/utils.ts b/web/utils.ts
index 66f6c51..cf1c782 100644
--- a/web/utils.ts
+++ b/web/utils.ts
@@ -40,3 +40,33 @@ export function useBeep() {
return {playBeep};
}
+
+
+export function toggleDark(event: MouseEvent) {
+ const isAppearanceTransition = document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+ if (!isAppearanceTransition) {
+ useColorMode().preference = useColorMode().value == 'dark' ? 'light' : 'dark'
+ return
+ }
+
+ const x = event.clientX
+ const y = event.clientY
+ const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y),)
+ // @ts-expect-error: Transition API
+ const transition = document.startViewTransition(async () => {
+ useColorMode().preference = useColorMode().value == 'dark' ? 'light' : 'dark'
+ await nextTick()
+ })
+ transition.ready
+ .then(() => {
+ const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`,]
+ document.documentElement.animate({
+ clipPath: useColorMode().value == 'dark' ? [...clipPath].reverse() : clipPath,
+ }, {
+ duration: 400,
+ easing: 'ease-out',
+ pseudoElement: useColorMode().value == 'dark' ? '::view-transition-old(root)' : '::view-transition-new(root)',
+ },)
+ })
+}
\ No newline at end of file