feat: move lunar_date logic to frontend

dreamhunter2333 · Apr 25, 2024 · ffd25ae · ffd25ae
1 parent b3edc57
commit ffd25ae
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 116 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,9 +1,7 @@
-FROM python:3.11-alpine
+FROM python:3.11-slim
 
 COPY requirements.txt requirements.txt
-RUN apk add --no-cache gcc g++ \
-    && python -m pip install --no-cache-dir -r requirements.txt \
-    && rm -rf /tmp/* /root/.cache /var/cache/apk/*
+RUN python -m pip install --no-cache-dir -r requirements.txt
 COPY . /app
 WORKDIR /app
 EXPOSE 8000

diff --git a/frontend/package.json b/frontend/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
     "@vueuse/core": "^10.9.0",
+    "lunar-javascript": "^1.6.12",
     "markdown-it": "^14.1.0",
     "naive-ui": "2.38.1",
     "vooks": "^0.2.12",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
 import {
   NGrid, NGi, NSpace, NAlert, NButton, NMessageProvider, NPageHeader,
-  NConfigProvider, NGlobalStyle, NBackTop, zhCN, darkTheme
+  NConfigProvider, NGlobalStyle, NBackTop, zhCN, darkTheme, NSpin
 } from 'naive-ui'
 import { onMounted, ref, computed } from "vue";
 import { useRouter } from 'vue-router'
@@ -15,6 +15,7 @@ const theme = computed(() => themeStorage.value == 'dark' ? darkTheme : null)
 
 const router = useRouter()
 const settings = ref({});
+const loading = ref(false);
 
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 
@@ -24,15 +25,23 @@ const logOut = () => {
 };
 
 const fetchSettings = async () => {
-  const response = await fetch(`${API_BASE}/api/v1/settings`, {
-    method: "GET",
-    headers: {
-      "Authorization": `Bearer ${state_jwt.value || "xxx"}`,
-      "Content-Type": "application/json"
-    },
-  });
-  if (response.ok) {
-    settings.value = await response.json();
+  loading.value = true;
+  try {
+    const response = await fetch(`${API_BASE}/api/v1/settings`, {
+      method: "GET",
+      headers: {
+        "Authorization": `Bearer ${state_jwt.value || "xxx"}`,
+        "Content-Type": "application/json"
+      },
+    });
+    if (response.ok) {
+      settings.value = await response.json();
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  finally {
+    loading.value = false;
   }
 }
 
@@ -47,55 +56,57 @@ onMounted(async () => {
 
 <template>
   <n-config-provider :locale="zhCN" :theme="theme">
-    <n-global-style />
-    <n-message-provider>
-      <n-grid :x-gap="12" :cols="isMobile ? 4 : 6">
-        <n-gi v-if="!isMobile">
-          <div class="side">
-            <ins class="adsbygoogle" style="display:block" :data-ad-client="settings.ad_client"
-              :data-ad-slot="settings.ad_slot" data-ad-format="auto" data-full-width-responsive="true"></ins>
-          </div>
-        </n-gi>
-        <n-gi :span="4">
-          <div class="main">
-            <n-page-header :subtitle="isMobile ? '' : '本项目仅供娱乐'">
-              <template #title>
-                <h3>AI 占卜</h3>
-              </template>
-              <template #extra>
-                <n-space>
-                  <n-button v-if="settings.user_name" @click="logOut">登出</n-button>
-                  <n-button v-else type="primary" @click="router.push('/login')">登录</n-button>
-                  <n-button @click="themeStorage = (themeStorage == 'dark' ? 'light' : 'dark')">
-                    {{ themeStorage == 'dark' ? '亮色' : '暗色' }}
-                  </n-button>
-                  <n-button type="primary" ghost tag="a" target="_blank"
-                    href="https://github.com/dreamhunter2333/chatgpt-tarot-divination">
-                    ☆ Github
-                  </n-button>
-                </n-space>
-              </template>
-              <template #footer>
-                <n-alert v-if="settings.user_name" type="success">
-                  你好, {{ settings.login_type }} 用户 {{ settings.user_name }}
-                </n-alert>
-                <n-alert v-else type="warning">
-                  当前未登录, 处于限流模式 ({{ settings.rate_limit }})
-                </n-alert>
-              </template>
-            </n-page-header>
-            <router-view></router-view>
-          </div>
-        </n-gi>
-        <n-gi :span="1" v-if="!isMobile">
-          <div class="side">
-            <ins class="adsbygoogle" style="display:block" :data-ad-client="settings.ad_client"
-              :data-ad-slot="settings.ad_slot" data-ad-format="auto" data-full-width-responsive="true"></ins>
-          </div>
-        </n-gi>
-      </n-grid>
-    </n-message-provider>
-    <n-back-top />
+    <n-spin description="加载中..." :show="loading">
+      <n-global-style />
+      <n-message-provider>
+        <n-grid :x-gap="12" :cols="isMobile ? 4 : 6">
+          <n-gi v-if="!isMobile">
+            <div class="side">
+              <ins class="adsbygoogle" style="display:block" :data-ad-client="settings.ad_client"
+                :data-ad-slot="settings.ad_slot" data-ad-format="auto" data-full-width-responsive="true"></ins>
+            </div>
+          </n-gi>
+          <n-gi :span="4">
+            <div class="main">
+              <n-page-header :subtitle="isMobile ? '' : '本项目仅供娱乐'">
+                <template #title>
+                  <h3>AI 占卜</h3>
+                </template>
+                <template #extra>
+                  <n-space>
+                    <n-button v-if="settings.user_name" @click="logOut">登出</n-button>
+                    <n-button v-else type="primary" @click="router.push('/login')">登录</n-button>
+                    <n-button @click="themeStorage = (themeStorage == 'dark' ? 'light' : 'dark')">
+                      {{ themeStorage == 'dark' ? '亮色' : '暗色' }}
+                    </n-button>
+                    <n-button type="primary" ghost tag="a" target="_blank"
+                      href="https://github.com/dreamhunter2333/chatgpt-tarot-divination">
+                      ☆ Github
+                    </n-button>
+                  </n-space>
+                </template>
+                <template #footer>
+                  <n-alert v-if="settings.user_name" type="success">
+                    你好, {{ settings.login_type }} 用户 {{ settings.user_name }}
+                  </n-alert>
+                  <n-alert v-else type="warning">
+                    当前未登录, 处于限流模式 ({{ settings.rate_limit }})
+                  </n-alert>
+                </template>
+              </n-page-header>
+              <router-view></router-view>
+            </div>
+          </n-gi>
+          <n-gi :span="1" v-if="!isMobile">
+            <div class="side">
+              <ins class="adsbygoogle" style="display:block" :data-ad-client="settings.ad_client"
+                :data-ad-slot="settings.ad_slot" data-ad-format="auto" data-full-width-responsive="true"></ins>
+            </div>
+          </n-gi>
+        </n-grid>
+      </n-message-provider>
+      <n-back-top />
+    </n-spin>
   </n-config-provider>
 </template>
 

diff --git a/frontend/src/views/Index.vue b/frontend/src/views/Index.vue
@@ -3,10 +3,12 @@ import {
   NInput, NButton, NCard, NDatePicker, NSelect, NFormItem,
   NInputNumber, NTabs, NTabPane, NDrawer, NDrawerContent
 } from 'naive-ui'
-import { watch, ref } from "vue";
+import { watch, ref, onMounted } from "vue";
 import MarkdownIt from 'markdown-it';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
 import { useStorage } from '@vueuse/core';
+import { Solar } from 'lunar-javascript'
+
 import { useIsMobile } from '../utils/composables'
 import About from '../components/About.vue'
 
@@ -19,7 +21,7 @@ const result = useStorage("result", "");
 const tmp_result = ref("");
 const prompt_type = useStorage("prompt_type", "tarot");
 const menu_type = useStorage("menu_type", "divination");
-const lunarBirthday = useStorage("lunarBirthday", '龙年 庚辰年 七月十八 巨蟹座')
+const lunarBirthday = ref("");
 const birthday = useStorage("birthday", "2000-08-17 00:00:00");
 const loading = ref(false);
 const API_BASE = import.meta.env.VITE_API_BASE || "";
@@ -97,14 +99,21 @@ const onSubmit = async () => {
   }
 };
 
-watch(birthday, async (newBirthday, oldBirthday) => {
-  lunarBirthday.value = '转换中...'
+const computeLunarBirthday = (newBirthday) => {
   try {
-    const res = await fetch(`${API_BASE}/api/date?date=${newBirthday}`)
-    lunarBirthday.value = await res.json()
+    let date = new Date(newBirthday)
+    let solar = Solar.fromYmdHms(
+      date.getFullYear(), date.getMonth() + 1, date.getDate(),
+      date.getHours(), date.getMinutes(), date.getSeconds());
+    lunarBirthday.value = solar.getLunar().toFullString();
   } catch (error) {
     console.error(error)
+    lunarBirthday.value = '转换失败'
   }
+}
+
+watch(birthday, async (newBirthday, oldBirthday) => {
+  computeLunarBirthday(newBirthday)
 })
 
 const changeTab = async (delta) => {
@@ -117,6 +126,10 @@ const changeTab = async (delta) => {
   }
   prompt_type.value = DIVINATION_OPTIONS[newIndex].key;
 }
+
+onMounted(async () => {
+  computeLunarBirthday(birthday.value)
+});
 </script>
 
 <template>
@@ -135,11 +148,13 @@ const changeTab = async (delta) => {
               placeholder="我的财务状况如何" />
           </div>
           <div v-if="prompt_type == 'birthday'">
-            <div style="display: inline-block;">
+            <div style="display: inline-block; text-align: left;">
               <n-form-item label="生日" label-placement="left">
                 <n-date-picker v-model:formatted-value="birthday" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
               </n-form-item>
-              <p>农历: {{ lunarBirthday }}</p>
+              <n-form-item label="农历" label-placement="left">
+                <p>{{ lunarBirthday }}</p>
+              </n-form-item>
             </div>
           </div>
           <div v-if="prompt_type == 'new_name'">

diff --git a/main.py b/main.py
@@ -12,7 +12,6 @@
 from slowapi.middleware import SlowAPIMiddleware
 
 from src.limiter import limiter, get_real_ipaddr
-from src.date_router import router as date_router
 from src.chatgpt_router import router as chatgpt_router
 from src.divination_router import router as divination_router
 from src.user_router import router as user_router
@@ -37,7 +36,6 @@
     allow_headers=["*"],
 )
 
-app.include_router(date_router)
 app.include_router(chatgpt_router)
 app.include_router(divination_router)
 app.include_router(user_router)

diff --git a/requirements.txt b/requirements.txt
@@ -4,5 +4,4 @@ uvicorn==0.21.1
 openai==0.27.4
 python-multipart==0.0.6
 slowapi==0.1.8
-sxtwl==2.0.6
 pyjwt==2.7.0
diff --git a/src/date_router.py b/src/date_router.py