first

admin-web/src/components/HelloWorld.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import viteLogo from '../assets/vite.svg'
+import heroImg from '../assets/hero.png'
+import vueLogo from '../assets/vue.svg'
+
+const count = ref(0)
+</script>
+
+<template>
+  <section id="center">
+    <div class="hero">
+      <img :src="heroImg" class="base" width="170" height="179" alt="" />
+      <img :src="vueLogo" class="framework" alt="Vue logo" />
+      <img :src="viteLogo" class="vite" alt="Vite logo" />
+    </div>
+    <div>
+      <h1>Get started</h1>
+      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
+    </div>
+    <button class="counter" @click="count++">Count is {{ count }}</button>
+  </section>
+
+  <div class="ticks"></div>
+
+  <section id="next-steps">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img class="logo" :src="viteLogo" alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://vuejs.org/" target="_blank">
+            <img class="button-icon" :src="vueLogo" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Vite community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/vitejs/vite" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://chat.vite.dev/" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/vite_js" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/vite.dev" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <div class="ticks"></div>
+  <section id="spacer"></section>
+</template>

admin-web/src/components/OrderStatusTag.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  status: string;
+}>();
+
+type StatusTone = "success" | "warning" | "danger" | "progress" | "neutral";
+
+const statusRules: Array<{ tone: StatusTone; keywords: string[] }> = [
+  {
+    tone: "danger",
+    keywords: ["失败", "作废", "失效", "异常", "停用", "禁用", "未启用", "关闭", "取消"],
+  },
+  {
+    tone: "success",
+    keywords: ["报告已出具", "已出报告", "已发布", "已完成", "已解决", "已启用", "账号正常", "发送成功", "成功"],
+  },
+  {
+    tone: "warning",
+    keywords: ["待补", "待寄", "待处理", "待发布", "待提交", "待用户反馈", "草稿"],
+  },
+  {
+    tone: "progress",
+    keywords: ["处理中", "处理", "鉴定", "收货", "已提交", "已更新", "进行中"],
+  },
+];
+
+const statusTone = computed<StatusTone>(() => {
+  const text = props.status.trim();
+  if (!text) {
+    return "neutral";
+  }
+
+  const matchedRule = statusRules.find((rule) => rule.keywords.some((keyword) => text.includes(keyword)));
+  return matchedRule?.tone ?? "neutral";
+});
+
+const statusClass = computed(() => ["status-tag", `status-tag--${statusTone.value}`]);
+</script>
+
+<template>
+  <span :class="statusClass">{{ status }}</span>
+</template>