init

2026-08-09 00:33:21 +08:00
parent 6be5ebc8f7
commit 9ea606b175
133 changed files with 7300 additions and 6289 deletions
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { DialogPortal, DialogRoot } from 'reka-ui'
+import {
+  UiDialogContent,
+  UiDialogDescription,
+  UiDialogHeader,
+  UiDialogOverlay,
+  UiDialogTitle,
+} from '@/components/ui/dialog'
+import { provideShow } from '@/components/hooks/show'
+
+withDefaults(
+  defineProps<{
+    title: string
+  }>(),
+  {
+    title: '导入',
+  },
+)
+
+const open = defineModel<boolean>('open', { default: false })
+let returnFocusElement: HTMLElement | null = null
+
+// The existing import forms reset themselves through this injection whenever their dialog opens.
+provideShow(open)
+
+watch(open, (value) => {
+  if (value && document.activeElement instanceof HTMLElement) {
+    returnFocusElement = document.activeElement
+  }
+})
+
+function keepOpenOnOutsideInteraction(event: Event) {
+  event.preventDefault()
+}
+
+function restoreTriggerFocus(event: Event) {
+  event.preventDefault()
+  nextTick(() => returnFocusElement?.focus())
+}
+</script>
+
+<template>
+  <DialogRoot v-model:open="open" modal>
+    <DialogPortal>
+      <UiDialogOverlay />
+      <UiDialogContent
+        class="character-import-dialog"
+        @interact-outside="keepOpenOnOutsideInteraction"
+        @pointer-down-outside="keepOpenOnOutsideInteraction"
+        @close-auto-focus="restoreTriggerFocus"
+      >
+        <UiDialogHeader>
+          <UiDialogTitle>{{ title }}</UiDialogTitle>
+        </UiDialogHeader>
+        <UiDialogDescription class="character-import-dialog__description">
+          {{ title }}窗口
+        </UiDialogDescription>
+        <div class="character-import-dialog__body">
+          <slot />
+        </div>
+      </UiDialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<style scoped lang="scss">
+.character-import-dialog {
+  --ui-dialog-viewport-inline-size: calc(100vw - 32px);
+  --ui-dialog-max-inline-size: 360px;
+
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.character-import-dialog__description {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.character-import-dialog__body {
+  box-sizing: border-box;
+  display: flex;
+  min-width: 0;
+  min-height: 128px;
+  max-height: calc(100dvh - var(--ui-dialog-header-block-size) - 32px);
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  overflow: auto;
+}
+</style>
@@ -5,6 +5,8 @@ import api from '@/api'
 import { useDialog } from '@/components/hooks/dialog'
 import { isShow, onShow } from '@/components/hooks/show'
 import { useConfigStore } from '@/stores'
+import { UiButton } from '@/components/ui/button'
+import { UiInput } from '@/components/ui/input'

 export default defineComponent({
  setup() {
@@ -48,20 +50,28 @@ export default defineComponent({
    return () => {
      return (
        <>
-          <div class="h-30 w-80 py-2 px-4 text-#e9c556">
-            <div class="flex justify-around items-center">
-              助手社区ID
-              <calc-input class="!w-60" v-model={uid.value} />
+          <div class="box-border flex min-h-30 w-full max-w-80 flex-col justify-center gap-2 px-4 py-2 text-[color:var(--ui-primary-foreground)]">
+            <label class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
+              <span>助手社区ID</span>
+              <UiInput class="min-w-0" v-model={uid.value} />
+            </label>
+            <div class="leading-5">
+              <p class="m-0 text-[color:var(--ui-muted-foreground)]">
+                *
+                点击导入后会从助手通过文字识别获取打造
+              </p>
+              <p class="m-0 text-[color:var(--ui-muted-foreground)]">
+                *
+                部分打造无法获取，此处仅做快捷导入
+              </p>
            </div>
-            <div>
-              <p class="text-#e9c556/80">* 点击导入后会从助手通过文字识别获取打造</p>
-              <p class="text-#e9c556/80">* 部分打造无法获取，此处仅做快捷导入</p>
-            </div>
-            <div class="flex justify-around items-center">
-              <calc-button onClick={execute} disabled={isLoading.value}>
+            <div class="flex items-center justify-center gap-3">
+              <UiButton onClick={() => execute()} disabled={isLoading.value}>
                导入
-              </calc-button>
-              <calc-button onClick={() => (visible.value = false)}>取消</calc-button>
+              </UiButton>
+              <UiButton variant="outline" onClick={() => (visible.value = false)}>
+                取消
+              </UiButton>
            </div>
          </div>
        </>
@@ -6,6 +6,7 @@ import { useDialog } from '@/components/hooks/dialog'
 import { isShow, onShow } from '@/components/hooks/show'
 import { useConfigStore } from '@/stores'
 import { type IHelperRoleInfo } from '@/api/info/type'
+import { UiButton } from '@/components/ui/button'

 export default defineComponent({
  props: {
@@ -54,22 +55,30 @@ export default defineComponent({
    return () => {
      return (
        <>
-          <div class="h-45 w-80 py-2 px-4 text-#e9c556">
-            <div class="flex justify-around items-center flex-col gap-1">
+          <div class="box-border flex min-h-45 w-full max-w-80 flex-col justify-center gap-2 px-4 py-2 text-[color:var(--ui-primary-foreground)]">
+            <div class="flex flex-col items-center justify-center gap-1 text-center">
              <div>检测到以下信息，是否导入助手数据？</div>
-              <div class="text-#DED29A">{props.alter?.roleName}</div>
-              <div class="text-#908150">{props.alter?.roleJob}</div>
-              <div class="text-#3ea74e">名望：{props.alter?.fame}</div>
+              <div class="text-[color:var(--ui-primary-foreground)]">{props.alter?.roleName}</div>
+              <div class="text-[color:var(--ui-muted-foreground)]">{props.alter?.roleJob}</div>
+              <div class="text-[color:var(--ui-success)]">名望：{props.alter?.fame}</div>
            </div>
-            <div>
-              <p class="text-#e9c556/80">* 点击导入后会从助手通过文字识别获取打造</p>
-              <p class="text-#e9c556/80">* 部分打造无法获取，此处仅做快捷导入</p>
+            <div class="leading-5">
+              <p class="m-0 text-[color:var(--ui-muted-foreground)]">
+                *
+                点击导入后会从助手通过文字识别获取打造
+              </p>
+              <p class="m-0 text-[color:var(--ui-muted-foreground)]">
+                *
+                部分打造无法获取，此处仅做快捷导入
+              </p>
            </div>
-            <div class="flex justify-around items-center">
-              <calc-button onClick={execute} disabled={isLoading.value}>
+            <div class="flex items-center justify-center gap-3">
+              <UiButton onClick={() => execute()} disabled={isLoading.value}>
                导入
-              </calc-button>
-              <calc-button onClick={() => (visible.value = false)}>取消</calc-button>
+              </UiButton>
+              <UiButton variant="outline" onClick={() => (visible.value = false)}>
+                取消
+              </UiButton>
            </div>
          </div>
        </>
@@ -5,6 +5,8 @@ import api from '@/api'
 import { useDialog } from '@/components/hooks/dialog'
 import { isShow, onShow } from '@/components/hooks/show'
 import { useConfigStore } from '@/stores'
+import { UiButton } from '@/components/ui/button'
+import { UiInput } from '@/components/ui/input'

 export default defineComponent({
  setup() {
@@ -44,23 +46,28 @@ export default defineComponent({
    return () => {
      return (
        <>
-          <div class="h-35 w-80 py-2 px-4 text-#e9c556">
-            <div class="flex justify-around items-center">
-              技能加点代码
-              <calc-input class="!w-60" v-model={skillCode.value} />
-            </div>
-            <div>
-              <p class="text-#e9c556/80">
+          <div class="box-border flex min-h-35 w-full max-w-80 flex-col justify-center gap-2 px-4 py-2 text-[color:var(--ui-primary-foreground)]">
+            <label class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
+              <span>技能加点代码</span>
+              <UiInput class="min-w-0" v-model={skillCode.value} />
+            </label>
+            <div class="leading-5">
+              <p class="m-0 text-[color:var(--ui-muted-foreground)]">
                *
                点击导入后会根据规则解析出技能加点、技能进化、技能强化
              </p>
-              <p class="text-#e9c556/80">* 部分技能可能存在无法识别的情况，需要手动调整</p>
+              <p class="m-0 text-[color:var(--ui-muted-foreground)]">
+                *
+                部分技能可能存在无法识别的情况，需要手动调整
+              </p>
            </div>
-            <div class="flex justify-around items-center">
-              <calc-button onClick={execute} disabled={!skillCode.value || isLoading.value}>
+            <div class="flex items-center justify-center gap-3">
+              <UiButton onClick={() => execute()} disabled={!skillCode.value || isLoading.value}>
                导入
-              </calc-button>
-              <calc-button onClick={() => (visible.value = false)}>取消</calc-button>
+              </UiButton>
+              <UiButton variant="outline" onClick={() => (visible.value = false)}>
+                取消
+              </UiButton>
            </div>
          </div>
        </>