init

2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,141 @@
+<script lang="tsx">
+import { HiSelection, selectionProps } from 'hoci'
+import type { PropType } from 'vue'
+import { computed, defineComponent, renderSlot } from 'vue'
+import type { LocationQuery } from 'vue-router'
+import { parseQuery, useRouter } from 'vue-router'
+import type { BaseType } from '@/components/hooks/types'
+
+export default defineComponent({
+  name: 'CalcTabs',
+  props: {
+    ...selectionProps,
+    vertical: {
+      type: Boolean,
+    },
+    route: {
+      type: Boolean,
+    },
+    query: {
+      type: [Object, String] as PropType<string | LocationQuery>,
+    },
+  },
+  setup(props, { emit, slots }) {
+    const router = useRouter()
+
+    const routeQuery = computed(() => {
+      if (typeof props.query == 'string') {
+        return parseQuery(props.query)
+      }
+      return props.query ?? {}
+    })
+
+    const modelValue = computed<BaseType>({
+      get() {
+        let val = props.modelValue
+        if (props.route) {
+          val = val ?? router.currentRoute.value.path
+        }
+        return val
+      },
+      set(val) {
+        if (props.route && val) {
+          val = decodeURIComponent(val.toString())
+          router.push({ path: val, query: routeQuery.value })
+        }
+        emit('update:modelValue', val)
+        emit('change', val)
+      },
+    })
+
+    return () => {
+      return (
+        <HiSelection
+          v-model={modelValue.value}
+          class={{ 'i-tabs': true, vertical: !!props.vertical }}
+          activeClass="active"
+          itemClass="i-tab cursor-pointer"
+        >
+          {renderSlot(slots, 'default')}
+        </HiSelection>
+      )
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.i-tabs {
+  display: flex;
+  list-style: none;
+  align-items: flex-end;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  width: 100%;
+  height: 25px;
+
+  font-size: 14px;
+
+  color: #c6b083;
+  margin: 0;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+    color: #c6b083;
+    &:visited {
+      color: currentColor;
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+
+    .i-tab {
+      border-radius: 0;
+    }
+  }
+
+  .i-tab {
+    // font-size: 12px;
+    margin-left: 1px;
+    width: fit-content;
+    padding: 0px 10px;
+    padding-bottom: 2px;
+    height: 20px;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    align-items: end;
+    box-sizing: border-box;
+
+    text-shadow: none;
+
+    &:visited {
+      color: currentColor;
+    }
+
+    border: #4f4838 1px solid;
+    border-bottom: none;
+    border-radius: 5px 5px 0 0;
+    background: linear-gradient(to top, rgba(6, 6, 6, 0.9), rgba(52, 52, 52, 0.9));
+    transition: all 0.4s ease-in-out;
+
+    &:hover {
+      background: linear-gradient(#4a4b4e, #1d1e22);
+    }
+
+    &.active {
+      margin-bottom: -1px;
+      background: linear-gradient(#574d38, #25221d);
+      border-image: url('@/assets/img/control/active_top.png') 1 fill stretch;
+      height: 22px;
+      // color: #ffb400;
+    }
+
+    &.disabled {
+      filter: grayscale(100%);
+      cursor: not-allowed;
+    }
+  }
+}
+</style>