feat(lang): add en-US, zh-CN language

zhoukk · May 21, 2019 · cccfe31 · cccfe31
1 parent 89b0b76
commit cccfe31
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 51 deletions.
diff --git a/image.go b/image.go
@@ -397,7 +397,7 @@ func (image *KimgImagick) waterMark(mw *imagick.MagickWand, req *KimgRequest) er
 			image.ctx.Logger.Debug("SetGravity %s", req.WaterMarkGravity)
 		}
 		if req.WaterMarkOpacity > 0 {
-			logoMW.ShadowImage(float64(req.WaterMarkOpacity), 0, 0, 0)
+			// logoMW.SetImageAlpha(float64(req.WaterMarkOpacity) / 100.0)
 		}
 		if req.WaterMarkRotate > 0 {
 			dw.Rotate(float64(req.WaterMarkRotate))

diff --git a/web/src/layouts/index.css b/web/src/layouts/index.css
@@ -24,6 +24,10 @@
   font-size: 1.2rem;
 }
 
+.lang {
+  padding-left: 30px;
+}
+
 .footer {
   text-align: center;
 }
diff --git a/web/src/layouts/index.js b/web/src/layouts/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Layout } from 'antd';
-import { FormattedMessage } from 'umi-plugin-react/locale';
+import { Layout, Switch } from 'antd';
+import { FormattedMessage, setLocale, getLocale } from 'umi-plugin-react/locale';
 import pkg from '../../package.json';
 import styles from './index.css'
 
@@ -10,13 +10,24 @@ function BasicLayout(props) {
   return (
     <Layout className={styles.page}>
       <Header className={styles.header}>
-        <div className={styles.title}><FormattedMessage id="WELCOME_TO_KIMG"/> <span className={styles.version}>v{pkg.version}</span></div>
+        <div className={styles.title}>
+          <FormattedMessage id="WELCOME_TO_KIMG" />
+          <span className={styles.version}> v{pkg.version}</span>
+        </div>
       </Header>
       <Content className={styles.content}>
         {props.children}
       </Content>
       <Footer className={styles.footer}>
-        <a href='https://github.com/zhoukk/kimg' target='view_frame'>zhoukk/kimg@github</a>
+        <a href='https://github.com/zhoukk/kimg' target='view_frame'>github: zhoukk/kimg</a>
+        <span className={styles.lang}>
+          <Switch
+            checkedChildren="English"
+            unCheckedChildren="中文"
+            defaultChecked={getLocale() === 'en-US'}
+            onChange={checked => setLocale(checked ? 'en-US' : 'zh-CN')}
+          />
+        </span>
       </Footer>
     </Layout>
   );

diff --git a/web/src/locales/en-US.js b/web/src/locales/en-US.js
@@ -55,6 +55,13 @@ export default {
   FORMAT_WEBP: 'WEBP',
   FORMAT_GIF: 'GIF',
   SCALE_ENABLE: 'Scale Enable',
+  SCALE_BY: 'Scale By',
+  SCALE_BY_PIXEL: 'Pixel',
+  SCALE_BY_PERCENT: 'Percent',
+  SCALE_SCOPE: 'Scope',
+  SCALE_SCOPE_WH: 'Width & Height',
+  SCALE_SCOPE_OW: 'Only Width',
+  SCALE_SCOPE_OH: 'Only Height',
   SCALE_MODE: 'Scale Mode',
   SCALE_WIDTH: 'Scale Width',
   SCALE_HEIGHT: 'Scale Height',

diff --git a/web/src/locales/zh-CN.js b/web/src/locales/zh-CN.js
@@ -55,6 +55,13 @@ export default {
   FORMAT_WEBP: 'WEBP',
   FORMAT_GIF: 'GIF',
   SCALE_ENABLE: '开启缩放',
+  SCALE_BY: '缩放方式',
+  SCALE_BY_PIXEL: '像素缩放',
+  SCALE_BY_PERCENT: '百分比缩放',
+  SCALE_SCOPE: '范围',
+  SCALE_SCOPE_WH: '宽度和高度',
+  SCALE_SCOPE_OW: '只有宽度',
+  SCALE_SCOPE_OH: '只有高度',
   SCALE_MODE: '缩放模式',
   SCALE_WIDTH: '缩放宽度',
   SCALE_HEIGHT: '缩放高度',

diff --git a/web/src/pages/index.js b/web/src/pages/index.js
@@ -15,7 +15,7 @@ const Panel = Collapse.Panel;
 const defaultQuery = {
   s: false, sm: 'fit', sw: 200, sh: 200, sp: 50, swp: 50, shp: 50,
   c: false, cg: 'c', cw: 200, ch: 200, co: 'lt', cx: 10, cy: 10,
-  wm: false, t: 'kimg', tf: '', tfs: 16, tfc: '', tsc: '', tsw: 0,
+  wm: false, t: 'kimg', tf: '', tfs: 32, tfc: '', tsc: '', tsw: 0,
   l: '', lw: 0, lh: 0, wmg: 'se', wmx: 10, wmy: 10, wmr: 0, wmo: 80,
   r: 0, bc: '', g: false, q: 75, ao: true, st: true, f: 'jpg',
 }
@@ -129,6 +129,7 @@ const ImageBasicQueryForm = Form.create({
           <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked={true} />
         )}
       </FormItem>
+      <Divider />
       <FormItem label={formatMessage({ id: 'OUTPUT_FORMAT' })}>
         {getFieldDecorator('f', { initialValue: defaultQuery.f })(
           <RadioGroup buttonStyle="solid">
@@ -392,51 +393,58 @@ const ImageWaterMarkQueryForm = Form.create({
           <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="close" />} defaultChecked={false} />
         )}
       </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_TEXT' })} wrapperCol={{ span: 8, offset: 2 }}>
-        {getFieldDecorator('t', { initialValue: defaultQuery.t })(
-          <Input disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_FONT_NAME' })} wrapperCol={{ span: 8, offset: 2 }}>
-        {getFieldDecorator('tf', { initialValue: defaultQuery.tf })(
-          <Input disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_FONT_SIZE' })}>
-        {getFieldDecorator('tfs', { initialValue: defaultQuery.tfs })(
-          <InputNumber min={0} disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_FONT_COLOR' })} wrapperCol={{ span: 8, offset: 2 }}>
-        {getFieldDecorator('tfc', { initialValue: defaultQuery.tfc })(
-          <Input prefix='#' addonAfter={<Icon style={{ color: `#${tfc}` }} type="bg-colors" />} disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_STROKE_COLOR' })} wrapperCol={{ span: 8, offset: 2 }}>
-        {getFieldDecorator('tsc', { initialValue: defaultQuery.tsc })(
-          <Input prefix='#' addonAfter={<Icon style={{ color: `#${tsc}` }} type="bg-colors" />} disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_STROKE_WIDTH' })}>
-        {getFieldDecorator('tsw', { initialValue: defaultQuery.tsw })(
-          <InputNumber min={0} disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_LOGO' })} wrapperCol={{ span: 12, offset: 2 }}>
-        {getFieldDecorator('l', { initialValue: defaultQuery.l })(
-          <Input disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_LOGO_W' })}>
-        {getFieldDecorator('lw', { initialValue: defaultQuery.lw })(
-          <InputNumber min={0} disabled={!enableWaterMark} />
-        )}
-      </FormItem>
-      <FormItem label={formatMessage({ id: 'WATERMARK_LOGO_H' })}>
-        {getFieldDecorator('lh', { initialValue: defaultQuery.lh })(
-          <InputNumber min={0} disabled={!enableWaterMark} />
-        )}
-      </FormItem>
+      <Tabs defaultActiveKey="text">
+        <TabPane tab={formatMessage({ id: 'WATERMARK_TEXT' })} key="text">
+          <FormItem label={formatMessage({ id: 'WATERMARK_TEXT' })} wrapperCol={{ span: 8, offset: 2 }}>
+            {getFieldDecorator('t', { initialValue: defaultQuery.t })(
+              <Input disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_FONT_NAME' })} wrapperCol={{ span: 8, offset: 2 }}>
+            {getFieldDecorator('tf', { initialValue: defaultQuery.tf })(
+              <Input disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_FONT_SIZE' })}>
+            {getFieldDecorator('tfs', { initialValue: defaultQuery.tfs })(
+              <InputNumber min={0} disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_FONT_COLOR' })} wrapperCol={{ span: 8, offset: 2 }}>
+            {getFieldDecorator('tfc', { initialValue: defaultQuery.tfc })(
+              <Input prefix='#' addonAfter={<Icon style={{ color: `#${tfc}` }} type="bg-colors" />} disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_STROKE_COLOR' })} wrapperCol={{ span: 8, offset: 2 }}>
+            {getFieldDecorator('tsc', { initialValue: defaultQuery.tsc })(
+              <Input prefix='#' addonAfter={<Icon style={{ color: `#${tsc}` }} type="bg-colors" />} disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_STROKE_WIDTH' })}>
+            {getFieldDecorator('tsw', { initialValue: defaultQuery.tsw })(
+              <InputNumber min={0} disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+        </TabPane>
+        <TabPane tab={formatMessage({ id: 'WATERMARK_LOGO' })} key="logo">
+          <FormItem label={formatMessage({ id: 'WATERMARK_LOGO' })} wrapperCol={{ span: 12, offset: 2 }}>
+            {getFieldDecorator('l', { initialValue: defaultQuery.l })(
+              <Input disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_LOGO_W' })}>
+            {getFieldDecorator('lw', { initialValue: defaultQuery.lw })(
+              <InputNumber min={0} disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+          <FormItem label={formatMessage({ id: 'WATERMARK_LOGO_H' })}>
+            {getFieldDecorator('lh', { initialValue: defaultQuery.lh })(
+              <InputNumber min={0} disabled={!enableWaterMark} />
+            )}
+          </FormItem>
+        </TabPane>
+      </Tabs>
+      <Divider />
       <FormItem label={formatMessage({ id: 'WATERMARK_GRAVITY' })}>
         {getFieldDecorator('wmg', { initialValue: defaultQuery.wmg })(
           <RadioGroup buttonStyle="solid" disabled={!enableWaterMark}>