init

frontend-ui/src/pages/Character/Config/import.vue

@@ -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>
         </>